JavaScriptでクロスドメインモードとナイトモードを実装する方法

近年、インターネットの発展に伴い、Webアプリケーションの対話性がますます重要となり、フロントエンド開発の技術レベルも向上の一途をたどっています。中でも JavaScript は非常に人気のあるプログラミング言語として、Web フロントエンド開発で広く使用されています。しかし、実際のアプリケーションでは、JavaScript のクロスドメイン アクセスの問題という問題に遭遇することがよくあります。この記事では、JavaScript を使用してナイト モードを実装し、これを通じて JavaScript クロスドメインを実現するという解決策を紹介します。

1. ナイト モードとは

ナイト モードは、従来の昼間モードとは逆の黒をテーマにしたモードです。スマートフォンやパソコンなどのデバイスの普及に伴い、夜間にデバイスを使用する際の目のダメージを軽減し、電力を節約できるナイトモードの人気が高まっています。同時に、ナイトモードはユーザーに優れたユーザーエクスペリエンスを提供することもできます。

2. ナイトモードの実装

ナイトモードを実装するにはJavaScriptとCSSが必要です。

1. CSS スタイルの定義

CSS ファイルに 2 つのカラー テーマのスタイルを定義します。ここでは、「昼」と「夜」の 2 つのテーマ スタイルを定義します。それぞれ。 。

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

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

2. JavaScript コードを定義する

JavaScript では、ユーザー操作を監視し、テーマを切り替える必要があるかどうかを判断し、ページにスタイルを適用する必要があります。

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

上記のコードでは、「テーマ」項目が localStorage に存在するかどうかを確認し、項目の値を読み取ることで、ユーザーがテーマを設定したかどうかを判断します。テーマが設定されている場合は、その値に基づいて対応するスタイルに切り替えます。テーマが設定されていない場合は、デフォルトで日モードに切り替わります。

ユーザーがボタンをクリックしてテーマを切り替えると、toggleTheme 関数を呼び出してスタイルを切り替え、ユーザーの選択内容を localStorage に保存します。

3. ボタンによるテーマの切り替え

上記の JavaScript コードでは、ボタンのクリック イベントをリッスンしてテーマを切り替えます。 HTML ファイルでは、ボタン要素を追加し、それに ID 値を与える必要があります。

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

ユーザーがボタンをクリックすると、JavaScript コードがテーマを別のテーマに切り替え、localStorage に保存します。ユーザーが再度ページにアクセスすると、保存したばかりのテーマ値に基づいて、対応するスタイルに自動的に切り替わります。

3. ナイト モードを使用して JavaScript クロスドメインを実装する

実際の開発では、他の Web サイトから API データを取得するなど、異なるドメイン名のリソースにアクセスする必要があることがよくあります。ただし、ブラウザーのオリジンポリシーの制限により、JavaScript スクリプトは同じドメイン名のリソースにのみアクセスできるため、クロスドメイン機能は非常に貴重になります。

ナイト モードを使用すると、JavaScript のクロスドメイン アクセスを比較的簡単に実現することもできます。具体的な手順は次のとおりです:

1. クロスドメインにする対象 Web サイトにアクセス許可を追加します

クロスドメインにする対象 Web サイトにアクセス許可を追加する必要がありますauthorization HTTP 応答ヘッダーにより、ローカル Web サイトからのアクセスが許可されます。ここでは PHP 言語を使用して実装しています。対象の Web サイトのindex.php ファイルに次のコードを追加できます。

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

上記のコードでは、アクセスを許可するドメイン名を「http://localhost」として指定していますが、実際のニーズに応じて変更できます。ここでワイルドカード「*」を使用してすべてのドメイン名へのアクセスを許可することもできますが、これには特定のセキュリティリスクがあるため、運用環境での使用はお勧めできません。

2. JavaScript コードを記述してクロスドメイン アクセスを実現します

ローカル Web サイトで、次の JavaScript コードを記述するだけでクロスドメイン アクセスを実現できます。

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

上記のコードでは、クロスドメイン アクセスに ES6 の新しいフェッチ関数を使用しています。 fetch 関数は Promise オブジェクトを返し、then メソッドを呼び出すことでクロスドメイン データを取得できます。エラーが発生すると例外がスローされるため、catch メソッドを使用して例外をキャッチして処理する必要があります。

ターゲット Web サイトにアクセスすると、JavaScript コードによってローカル Web サイトのアクセス許可情報が引き継がれるため、クロスドメイン アクセスが正常に実現されます。

4. 概要

この記事では、JavaScript を使用してナイト モードを実装する方法と、ナイト モードを使用して JavaScript クロスドメイン アクセスを実装する方法を紹介します。ナイト モードを使用すると、ユーザーのエクスペリエンスが向上するだけでなく、クロスドメイン アクセスの問題も解決され、JavaScript の適用範囲が大幅に広がります。この記事があなたのお役に立てば幸いです。

以上がJavaScriptでクロスドメインモードとナイトモードを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。