So implementieren Sie den domänenübergreifenden und Nachtmodus in Javascript

Mit der Entwicklung des Internets ist in den letzten Jahren die Interaktivität von Webanwendungen immer wichtiger geworden und auch das technische Niveau der Frontend-Entwicklung verbessert sich ständig. Unter ihnen wird JavaScript als sehr beliebte Programmiersprache häufig in der Web-Front-End-Entwicklung verwendet. In praktischen Anwendungen stoßen wir jedoch häufig auf ein Problem, nämlich das Problem des domänenübergreifenden JavaScript-Zugriffs. In diesem Artikel wird eine Lösung vorgestellt: Die Verwendung von JavaScript zur Implementierung des Nachtmodus und die Erzielung domänenübergreifender JavaScript-Funktionen.

1. Was ist der Nachtmodus?

Der Nachtmodus ist ein schwarzer Themenmodus, der das Gegenteil des herkömmlichen Tagmodus ist. Mit der weit verbreiteten Nutzung von Geräten wie Smartphones und Computern erfreut sich der Nachtmodus bei Benutzern immer größerer Beliebtheit, da er dabei helfen kann, Augenschäden bei der Verwendung von Geräten in der Nacht zu reduzieren und Strom zu sparen. Gleichzeitig kann der Nachtmodus den Benutzern auch ein besseres Benutzererlebnis bieten.

2. Implementierung des Nachtmodus

Bei der Implementierung des Nachtmodus sind JavaScript und CSS erforderlich. Die spezifischen Schritte sind wie folgt:

1 Definieren Sie CSS-Stile

Definieren Sie die Stile von zwei Farbthemen in der CSS-Datei. bzw. Zwei Themenstile.

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

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

2. Definieren Sie JavaScript-Code

In JavaScript müssen wir die Vorgänge des Benutzers überwachen, feststellen, ob das Thema geändert werden muss, und den Stil auf die Seite anwenden.

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

Im obigen Code ermitteln wir, ob das Element „Theme“ in localStorage vorhanden ist, und lesen den Wert des Elements, um festzustellen, ob der Benutzer ein Thema festgelegt hat. Wenn ein Thema festgelegt ist, wechseln Sie basierend auf seinem Wert zum entsprechenden Stil. In Fällen, in denen kein Thema festgelegt ist, wechseln wir standardmäßig in den Tagesmodus.

Wenn der Benutzer auf die Schaltfläche klickt, um das Thema zu wechseln, ändern wir den Stil, indem wir die Funktion toggleTheme aufrufen und die Auswahl des Benutzers in localStorage speichern.

3. Themen über Schaltflächen wechseln

Im obigen JavaScript-Code hören wir auf das Klickereignis der Schaltfläche, um das Thema zu wechseln. In der HTML-Datei müssen wir ein Schaltflächenelement hinzufügen und ihm einen ID-Wert zuweisen.

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

Wenn der Benutzer auf die Schaltfläche klickt, wechselt der JavaScript-Code das Design zu einem anderen und speichert es im lokalen Speicher. Wenn der Benutzer die Seite erneut besucht, wechselt sie automatisch zum entsprechenden Stil basierend auf dem soeben gespeicherten Designwert.

3. Verwenden Sie den Nachtmodus, um JavaScript domänenübergreifend zu implementieren

In der tatsächlichen Entwicklung müssen wir häufig auf Ressourcen unter verschiedenen Domänennamen zugreifen, z. B. um API-Daten von anderen Websites abzurufen , usw. Aufgrund der Same-Origin-Richtlinienbeschränkungen des Browsers können JavaScript-Skripte jedoch nur auf Ressourcen unter demselben Domänennamen zugreifen, sodass domänenübergreifende Funktionen sehr wertvoll sind.

Mit dem Nachtmodus können wir auch relativ einfach einen domänenübergreifenden JavaScript-Zugriff erreichen. Die konkreten Schritte sind wie folgt:

1. Fügen Sie die Zugriffsberechtigung auf der Zielwebsite hinzu, um domänenübergreifend zu sein.

Auf der Zielwebsite müssen wir dies tun Fügen Sie einen HTTP-Antwortheader für die Zugriffsautorisierung hinzu, um den Zugriff von lokalen Websites aus zu ermöglichen. Wir verwenden die PHP-Sprache, um es hier zu implementieren. Sie können den folgenden Code zur Datei index.php der Zielwebsite hinzufügen.

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

Im obigen Code geben wir den Domänennamen an, auf den zugegriffen werden darf, als „http://localhost“, der entsprechend den tatsächlichen Anforderungen geändert werden kann. Sie können hier auch den Platzhalter „*“ verwenden, um den Zugriff auf alle Domänennamen zu ermöglichen, dies birgt jedoch gewisse Sicherheitsrisiken und wird für den Einsatz in einer Produktionsumgebung nicht empfohlen.

2. Schreiben Sie JavaScript-Code, um domänenübergreifenden Zugriff zu erreichen.

Schreiben Sie auf unserer lokalen Website einfach den folgenden JavaScript-Code, um domänenübergreifenden Zugriff zu erreichen.

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

Im obigen Code verwenden wir die neue Abruffunktion in ES6 für den domänenübergreifenden Zugriff. Die Abruffunktion gibt ein Promise-Objekt zurück, und wir können domänenübergreifende Daten abrufen, indem wir die Methode then aufrufen. Wenn ein Fehler auftritt, wird eine Ausnahme ausgelöst, und wir müssen die Catch-Methode verwenden, um die Ausnahme abzufangen und zu behandeln.

Beim Zugriff auf die Zielwebsite überträgt der JavaScript-Code die Zugriffsberechtigungsinformationen der lokalen Website und erreicht so erfolgreich einen domänenübergreifenden Zugriff.

4. Zusammenfassung

In diesem Artikel wird erläutert, wie Sie mit JavaScript den Nachtmodus implementieren und den Nachtmodus zum Implementieren des domänenübergreifenden JavaScript-Zugriffs verwenden. Die Verwendung des Nachtmodus kann Benutzern ein besseres Erlebnis bieten, außerdem wird das Problem des domänenübergreifenden Zugriffs gelöst und der Anwendungsbereich von JavaScript erheblich erweitert. Ich hoffe, dieser Artikel kann für Sie hilfreich sein.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den domänenübergreifenden und Nachtmodus in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!