如何设置首页Checkbox状态并同步切换iframe明暗模式

问题描述 #

我正在搭建明暗模式切换功能，用jQuery实现了以下逻辑：

• 监听#mode复选框的change事件，切换时为html元素添加/移除dark/light类，并将模式状态存入localStorage；
• 页面加载时从localStorage读取状态，恢复对应模式与复选框状态；
• 通过CSS自定义属性实现明暗样式切换。

但首页中嵌入的iframe聊天框无法同步切换模式，仅在刷新iframe页面后才会生效。尝试在iframe页面脚本中使用.on('change')方法未解决问题，寻求可行方案。

现有代码 #

首页jQuery代码 #

$(document).ready(function() {
  var switched = $('#mode');
  
  switched.on("change", function(){
    if (switched.is(':checked')){
      $('html').removeClass('dark');
      $('html').addClass('light');
      localStorage.setItem('mode','light');
    }
    else{
      $('html').removeClass('light');
      $('html').addClass('dark');
      localStorage.setItem('mode','dark');
    }
  });
  var mode = localStorage.getItem('mode');
  if (mode == 'dark') {
    switched.prop( "checked", false );
    $('html').removeClass("light");
    $('html').addClass("dark");
  }
  if (mode == 'light') {
    switched.prop( "checked", true );
    $('html').removeClass("dark");
    $('html').addClass("light");
  }

});

CSS代码 #

:root,
:root.dark {
  --color-bg: #263238;
  --color-fg: #ffffff;
}
:root.light {
  --color-bg: #ffffff;
  --color-fg: #000000;
}

iframe页面脚本 #

$.get('https://amy-testfo.forumactif.com/', function(datas){ 
    var coche = $('#mode',datas);
    var mode = localStorage.getItem('mode');

    if(coche.not(':checked')){
      $('html').removeClass("light");
      $('html').addClass("dark");
    }
    if(coche.is(':checked')){
      $('html').removeClass("dark");
      $('html').addClass("light");
    }

    if (mode == 'dark') {
      $('html').removeClass("light");
      $('html').addClass("dark");
    }
    if (mode == 'light') {
      $('html').removeClass("dark");
      $('html').addClass("light");
    }

  });

解决方案 #

根据iframe与主页面是否同源，提供以下几种可行方案：

方案一：监听localStorage变化（同源场景） #

同源下，iframe可以监听storage事件，当主页面修改localStorage时，自动同步模式：

修改iframe页面脚本为：

// 统一模式更新逻辑
function updateMode(mode) {
  if (mode === 'dark') {
    $('html').removeClass('light').addClass('dark');
  } else {
    $('html').removeClass('dark').addClass('light');
  }
}

// 页面加载时初始化模式
var initialMode = localStorage.getItem('mode') || 'dark';
updateMode(initialMode);

// 监听localStorage的mode字段变化
$(window).on('storage', function(e) {
  const event = e.originalEvent;
  if (event.key === 'mode') {
    updateMode(event.newValue);
  }
});

方案二：主页面直接操作iframe（同源场景） #

主页面在切换模式时，直接调用iframe内部的模式更新方法：

1. 修改主页面的change事件逻辑：

switched.on("change", function(){
  var mode;
  if (switched.is(':checked')){
    $('html').removeClass('dark').addClass('light');
    mode = 'light';
  } else {
    $('html').removeClass('light').addClass('dark');
    mode = 'dark';
  }
  localStorage.setItem('mode', mode);
  
  // 同步到iframe（替换成你的iframe ID）
  const iframe = document.getElementById('chat-iframe');
  if (iframe && iframe.contentWindow) {
    iframe.contentWindow.updateMode(mode);
  }
});

2. 在iframe页面定义全局的updateMode函数：

function updateMode(mode) {
  if (mode === 'dark') {
    $('html').removeClass('light').addClass('dark');
  } else {
    $('html').removeClass('dark').addClass('light');
  }
}

// 初始化模式
var initialMode = localStorage.getItem('mode') || 'dark';
updateMode(initialMode);

方案三：postMessage跨域通信（跨域场景） #

如果iframe与主页面不同源，使用postMessage传递模式切换信号：

1. 主页面change事件添加消息发送逻辑：

switched.on("change", function(){
  var mode;
  if (switched.is(':checked')){
    $('html').removeClass('dark').addClass('light');
    mode = 'light';
  } else {
    $('html').removeClass('light').addClass('dark');
    mode = 'dark';
  }
  localStorage.setItem('mode', mode);
  
  // 发送模式切换消息到iframe（建议替换为iframe的实际域名，提升安全性）
  const iframe = document.getElementById('chat-iframe');
  if (iframe && iframe.contentWindow) {
    iframe.contentWindow.postMessage(
      { type: 'MODE_CHANGE', mode: mode },
      '*'
    );
  }
});

2. iframe页面监听消息并更新模式：

function updateMode(mode) {
  if (mode === 'dark') {
    $('html').removeClass('light').addClass('dark');
  } else {
    $('html').removeClass('dark').addClass('light');
  }
}

// 初始化模式
var initialMode = localStorage.getItem('mode') || 'dark';
updateMode(initialMode);

// 监听跨域消息
window.addEventListener('message', function(e) {
  // 验证消息来源，防止恶意请求（替换为主页面实际域名）
  // if (e.origin !== 'https://your-main-domain.com') return;
  
  if (e.data?.type === 'MODE_CHANGE') {
    updateMode(e.data.mode);
    // 同步更新iframe的localStorage
    localStorage.setItem('mode', e.data.mode);
  }
});

注意事项 #

• 同源场景优先选择方案一或方案二，实现更简洁；跨域场景必须用方案三。
• 方案三中建议指定具体的origin，不要使用*，避免安全风险。
• 原iframe中的$.get请求可以删除，无需通过请求主页面获取状态，直接通过上述方案同步即可。

内容的提问来源于stack exchange，提问作者amy