Bagaimana untuk melaksanakan rentas domain dan mod malam dalam javascript

Dalam beberapa tahun kebelakangan ini, dengan perkembangan Internet, interaktiviti aplikasi web menjadi semakin penting, dan tahap teknikal pembangunan bahagian hadapan juga sentiasa bertambah baik. Antaranya, JavaScript, sebagai bahasa pengaturcaraan yang sangat popular, digunakan secara meluas dalam pembangunan front-end web. Walau bagaimanapun, dalam aplikasi praktikal, kami sering menghadapi masalah, iaitu masalah akses merentas domain JavaScript. Artikel ini akan memperkenalkan penyelesaian - menggunakan JavaScript untuk melaksanakan mod malam, dan melalui ini untuk mencapai merentas domain JavaScript.

1. Apakah itu mod malam

Mod malam ialah mod tema hitam, yang bertentangan dengan mod siang tradisional. Dengan penggunaan peranti seperti telefon pintar dan komputer secara meluas, mod malam menjadi semakin popular di kalangan pengguna kerana ia dapat membantu pengguna mengurangkan kerosakan pada mata mereka yang disebabkan oleh menggunakan peranti pada waktu malam dan menjimatkan kuasa. Pada masa yang sama, mod malam juga boleh memberikan pengguna pengalaman pengguna yang lebih baik.

2. Pelaksanaan mod malam

Apabila melaksanakan mod malam, JavaScript dan CSS diperlukan. Langkah-langkah khusus adalah seperti berikut:

1 Tentukan gaya CSS

Tentukan gaya dua tema warna dalam fail CSS Di sini kami mentakrifkan dua gaya tema "siang" dan "malam". masing-masing.

/* 日间模式样式 */
body.day {
  background-color: #ffffff;
  color: #000000;
}

/* 夜间模式样式 */
body.night {
  background-color: #000000;
  color: #ffffff;
}

2. Tentukan kod JavaScript

Dalam JavaScript, kami perlu memantau operasi pengguna, menentukan sama ada tema perlu ditukar dan menggunakan gaya pada halaman.

// 判断是否是夜间模式，默认为日间模式
var isNight = false;

// 切换主题函数
function toggleTheme() {
  if (isNight) {
    // 切换为日间模式
    document.body.classList.remove("night");
    document.body.classList.add("day");
    isNight = false;
  } else {
    // 切换为夜间模式
    document.body.classList.remove("day");
    document.body.classList.add("night");
    isNight = true;
  }
}

// 监听用户的操作
document.addEventListener("DOMContentLoaded", function(event) {
  // 判断页面是否已设置了主题
  var theme = localStorage.getItem("theme");
  if (theme === "night") {
    toggleTheme();
  }

  // 监听按钮点击事件
  var btn = document.getElementById("btn-toggle-theme");
  btn.addEventListener("click", function() {
    // 切换主题
    toggleTheme();
    // 保存用户的选择
    localStorage.setItem("theme", isNight ? "night" : "day");
  });
});

Dalam kod di atas, kami menentukan sama ada pengguna telah menetapkan tema dengan menentukan sama ada item "tema" wujud dalam localStorage dan membaca nilai item tersebut. Jika tema ditetapkan, tukar kepada gaya yang sepadan berdasarkan nilainya. Untuk kes yang tiada tema ditetapkan, kami bertukar kepada mod hari secara lalai.

Apabila pengguna mengklik butang untuk menukar tema, kami menukar gaya dengan memanggil fungsi toggleTheme dan menyimpan pilihan pengguna ke localStorage.

3. Tukar tema melalui butang

Dalam kod JavaScript di atas, kami mendengar peristiwa klik butang untuk menukar tema. Dalam fail HTML, kita perlu menambah elemen butang dan memberikannya nilai ID.

<button id="btn-toggle-theme">切换主题</button>

Apabila pengguna mengklik butang, kod JavaScript menukar tema kepada tema lain dan menyimpannya ke localStorage. Apabila pengguna melawat halaman sekali lagi, ia akan bertukar secara automatik kepada gaya yang sepadan berdasarkan nilai tema yang baru disimpan.

3. Gunakan mod malam untuk melaksanakan JavaScript merentas domain

Dalam pembangunan sebenar, kita sering perlu mengakses sumber di bawah nama domain yang berbeza, seperti mendapatkan data API daripada tapak web lain. Walau bagaimanapun, disebabkan oleh sekatan dasar asal penyemak imbas, skrip JavaScript hanya boleh mengakses sumber di bawah nama domain yang sama, jadi keupayaan merentas domain menjadi sangat berharga.

Menggunakan mod malam, kami juga boleh mencapai akses merentas domain JavaScript dengan agak mudah. Langkah-langkah khusus adalah seperti berikut:

1 Tambah kebenaran akses pada tapak web sasaran untuk menjadi domain silang

Pada tapak web sasaran untuk menjadi domain silang, kami perlu menambah akses pengepala respons HTTP kebenaran, membenarkan Lawatan dari tapak web tempatan. Kami menggunakan bahasa PHP untuk melaksanakannya di sini Anda boleh menambah kod berikut pada fail index.php tapak web sasaran.

// 允许访问授权
header('Access-Control-Allow-Origin: http://localhost');

Dalam kod di atas, kami menyatakan nama domain yang dibenarkan untuk diakses sebagai "http://localhost", yang boleh diubah suai mengikut keperluan sebenar. Anda juga boleh menggunakan kad bebas "*" di sini untuk membenarkan akses kepada semua nama domain, tetapi ini mempunyai risiko keselamatan tertentu dan tidak disyorkan untuk digunakan dalam persekitaran pengeluaran.

2. Tulis kod JavaScript untuk mencapai akses merentas domain

Di tapak web tempatan kami, cuma tulis kod JavaScript berikut untuk mencapai akses merentas domain.

// 获取目标数据
fetch('http://example.com/api/data').then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function(error) {
  console.log('发生错误', error);
});

Dalam kod di atas, kami menggunakan fungsi pengambilan baharu dalam ES6 untuk akses merentas domain. Fungsi fetch mengembalikan objek Promise dan kami boleh mendapatkan data merentas domain dengan memanggil kaedah kemudian. Jika ralat berlaku, pengecualian akan dilemparkan, dan kita perlu menggunakan kaedah tangkapan untuk menangkap pengecualian dan mengendalikannya.

Apabila mengakses tapak web sasaran, kod JavaScript akan membawa maklumat kebenaran capaian tapak web tempatan, sekali gus berjaya mencapai akses merentas domain.

4. Ringkasan

Artikel ini memperkenalkan cara menggunakan JavaScript untuk melaksanakan mod malam dan menggunakan mod malam untuk melaksanakan akses merentas domain JavaScript. Menggunakan mod malam boleh memberi pengguna pengalaman yang lebih baik, dan ia juga menyelesaikan masalah akses merentas domain dan meluaskan skop aplikasi JavaScript. Semoga artikel ini dapat membantu anda.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan rentas domain dan mod malam dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!