자바스크립트에서 도메인 간 및 야간 모드를 구현하는 방법

최근에는 인터넷의 발전과 함께 웹 애플리케이션의 상호작용성이 점점 더 중요해지고 있으며, 프론트엔드 개발의 기술 수준도 지속적으로 향상되고 있습니다. 그 중 JavaScript는 매우 인기 있는 프로그래밍 언어이며 웹 프론트엔드 개발에 널리 사용됩니다. 그러나 실제 응용 프로그램에서는 JavaScript 크로스 도메인 액세스 문제인 문제에 자주 직면합니다. 이 기사에서는 JavaScript를 사용하여 야간 모드를 구현하고 이를 통해 JavaScript 크로스 도메인을 구현하는 솔루션을 소개합니다.

1. 야간 모드란 무엇인가요?

야간 모드는 기존의 주간 모드와 반대되는 블랙 테마 모드입니다. 스마트폰, 컴퓨터 등 다양한 기기의 사용이 보편화되면서 야간 모드는 야간에 기기 사용으로 인한 눈의 손상을 줄이고 전력을 절약할 수 있어 사용자들 사이에서 점점 더 인기가 높아지고 있습니다. 동시에 야간 모드는 사용자에게 더 나은 사용자 경험을 제공할 수도 있습니다.

2. 야간 모드 구현

야간 모드 구현 시 JavaScript와 CSS가 필요합니다. 구체적인 단계는 다음과 같습니다.

1. CSS 스타일 정의

CSS 파일에서 두 가지 색상 테마의 스타일을 정의합니다. 여기서는 각각 "낮"과 "밤"이라는 두 가지 테마 스타일을 정의합니다.

/* 日间模式样式 */
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에 존재하는지 확인하고 해당 항목의 값을 읽어 사용자가 테마를 설정했는지 여부를 확인합니다. 테마가 설정되면 해당 값에 따라 해당 스타일로 전환됩니다. 테마가 설정되지 않은 경우 기본적으로 주간 모드로 전환됩니다.

사용자가 테마를 전환하기 위해 버튼을 클릭하면ggleTheme 함수를 호출하여 스타일을 전환하고 사용자의 선택 사항을 localStorage에 저장합니다.

3. 버튼을 통해 테마 전환

위 JavaScript 코드에서는 버튼의 클릭 이벤트를 수신하여 테마를 전환합니다. HTML 파일에서 버튼 요소를 추가하고 ID 값을 제공해야 합니다.

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

사용자가 버튼을 클릭하면 JavaScript 코드가 테마를 다른 테마로 전환하고 이를 localStorage에 저장합니다. 사용자가 페이지를 다시 방문하면 방금 저장한 테마 값에 따라 해당 스타일로 자동 전환됩니다.

3. 야간 모드를 사용하여 JavaScript 크로스 도메인 구현

실제 개발에서는 다른 웹사이트에서 API 데이터를 얻는 등 다양한 도메인 이름으로 리소스에 액세스해야 하는 경우가 많습니다. 그러나 브라우저 원본 정책 제한으로 인해 JavaScript 스크립트는 동일한 도메인 이름 아래의 리소스에만 액세스할 수 있으므로 도메인 간 기능이 매우 중요해집니다.

야간 모드를 사용하면 비교적 쉽게 JavaScript 도메인 간 액세스를 달성할 수도 있습니다. 구체적인 단계는 다음과 같습니다.

1. 교차 도메인이 되도록 대상 웹사이트에 액세스 권한을 추가하고, 로컬에서 액세스를 허용하려면 액세스 권한 부여 HTTP 응답 헤더를 추가해야 합니다. 웹사이트. 여기서는 PHP 언어를 사용하여 구현합니다. 대상 웹사이트의 index.php 파일에 다음 코드를 추가할 수 있습니다.

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

위 코드에서는 접근이 허용된 도메인 이름을 "http://localhost"로 지정했는데, 이는 실제 필요에 따라 수정 가능합니다. 여기에서 와일드카드 "*"를 사용하여 모든 도메인 이름에 대한 액세스를 허용할 수도 있지만 이는 특정 보안 위험이 있으므로 프로덕션 환경에서는 사용하지 않는 것이 좋습니다.

2. 도메인 간 액세스를 위한 JavaScript 코드 작성

로컬 웹사이트에서 다음 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 메서드를 사용해야 합니다.

대상 웹사이트에 액세스할 때 JavaScript 코드는 로컬 웹사이트의 액세스 인증 정보를 전달하여 성공적으로 교차 도메인 액세스를 달성합니다.

4. 요약

이 글에서는 JavaScript를 사용하여 야간 모드를 구현하는 방법과 야간 모드를 사용하여 JavaScript 교차 도메인 액세스를 구현하는 방법을 소개합니다. 야간 모드를 사용하면 사용자에게 더 나은 경험을 제공할 수 있으며, 도메인 간 액세스 문제를 해결하고 JavaScript의 적용 범위를 크게 확대합니다. 이 기사가 도움이 되기를 바랍니다.

위 내용은 자바스크립트에서 도메인 간 및 야간 모드를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!