Comment implémenter le mode inter-domaines et nuit en javascript

Ces dernières années, avec le développement d'Internet, l'interactivité des applications Web est devenue de plus en plus importante, et le niveau technique du développement front-end s'améliore également constamment. Parmi eux, JavaScript, en tant que langage de programmation très populaire, est largement utilisé dans le développement web front-end. Cependant, dans les applications pratiques, nous rencontrons souvent un problème, qui est le problème de l'accès inter-domaines JavaScript. Cet article présentera une solution : utiliser JavaScript pour implémenter le mode nuit et, grâce à cela, parvenir à un inter-domaine JavaScript.

1. Qu'est-ce que le mode nuit ?

Le mode nuit est un mode à thème noir, qui est à l'opposé du mode jour traditionnel. Avec l'utilisation généralisée d'appareils tels que les smartphones et les ordinateurs, le mode nuit devient de plus en plus populaire parmi les utilisateurs car il peut aider les utilisateurs à réduire les dommages causés à leurs yeux par l'utilisation d'appareils la nuit et à économiser de l'énergie. Dans le même temps, le mode nuit peut également offrir aux utilisateurs une meilleure expérience utilisateur.

2. Implémentation du mode nuit

Lors de l'implémentation du mode nuit, JavaScript et CSS sont requis. Les étapes spécifiques sont les suivantes :

1. Définir les styles CSS

Définissez les styles de deux thèmes de couleurs dans le fichier CSS, respectivement.

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

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

2. Définir le code JavaScript

En JavaScript, nous devons surveiller les opérations des utilisateurs, déterminer si nous devons changer de thème et appliquer des styles à la page.

// 判断是否是夜间模式，默认为日间模式
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");
  });
});

Dans le code ci-dessus, nous déterminons si l'utilisateur a défini un thème en déterminant si l'élément "thème" existe dans localStorage et en lisant la valeur de l'élément. Si un thème est défini, passez au style correspondant en fonction de sa valeur. Pour les cas où aucun thème n'est défini, nous passons en mode jour par défaut.

Lorsque l'utilisateur clique sur le bouton pour changer de thème, nous changeons de style en appelant la fonction toggleTheme et enregistrons la sélection de l'utilisateur dans localStorage.

3. Changer de thème via des boutons

Dans le code JavaScript ci-dessus, nous écoutons l'événement de clic du bouton pour changer de thème. Dans le fichier HTML, nous devons ajouter un élément bouton et lui donner une valeur ID.

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

Lorsque l'utilisateur clique sur le bouton, le code JavaScript change le thème en un autre et l'enregistre dans localStorage. Lorsque l'utilisateur visite à nouveau la page, celle-ci passe automatiquement au style correspondant en fonction de la valeur du thème qui vient d'être enregistrée.

3. Utilisez le mode nuit pour implémenter JavaScript entre domaines

Dans le développement réel, nous avons souvent besoin d'accéder à des ressources sous différents noms de domaine, par exemple pour obtenir des données API à partir d'autres sites Web. Cependant, en raison des restrictions de la politique d'origine du navigateur, les scripts JavaScript ne peuvent accéder aux ressources que sous le même nom de domaine, les capacités inter-domaines deviennent donc très précieuses.

En utilisant le mode nuit, nous pouvons également obtenir un accès inter-domaines JavaScript relativement facilement. Les étapes spécifiques sont les suivantes :

1. Ajoutez une autorisation d'accès sur le site Web cible pour être inter-domaine, nous devons ajouter un en-tête de réponse HTTP d'autorisation d'accès pour autoriser l'accès depuis le local. site web. Nous utilisons le langage PHP pour l'implémenter ici. Vous pouvez ajouter le code suivant au fichier index.php du site Web cible.

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

Dans le code ci-dessus, nous précisons le nom de domaine accessible comme "http://localhost", qui peut être modifié en fonction des besoins réels. Vous pouvez également utiliser le caractère générique « * » ici pour autoriser l'accès à tous les noms de domaine, mais cela présente certains risques de sécurité et n'est pas recommandé pour une utilisation dans un environnement de production.

2. Écrivez du code JavaScript pour un accès inter-domaines

Sur notre site Web local, écrivez simplement le code JavaScript suivant pour obtenir un accès inter-domaines.

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

Dans le code ci-dessus, nous utilisons la nouvelle fonction fetch d'ES6 pour l'accès inter-domaines. La fonction fetch renvoie un objet Promise et nous pouvons obtenir des données inter-domaines en appelant la méthode then. Si une erreur se produit, une exception sera levée et nous devons utiliser la méthode catch pour intercepter l'exception et la gérer.

Lors de l'accès au site Web cible, le code JavaScript contiendra les informations d'autorisation d'accès du site Web local, réalisant ainsi avec succès un accès inter-domaines.

4. Résumé

Cet article explique comment utiliser JavaScript pour implémenter le mode nuit et utiliser le mode nuit pour implémenter l'accès inter-domaines JavaScript. L'utilisation du mode nuit peut offrir aux utilisateurs une meilleure expérience, mais résout également le problème de l'accès entre domaines et élargit considérablement la portée des applications de JavaScript. J'espère que cet article pourra vous être utile.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!