Просмотр исходного кода

使用postMessage向iframe传参theme-mode,实现切换子页面主题的功能
子页面的js示例
```
<script>
// 接收父页面的主题模式
window.addEventListener('message', function(event) {
if (event.data.themeMode) {
var theme = event.data.themeMode;
// 测试是否正确接受到theme-mode的值
// console.log('Received theme mode from parent:', theme);
applyTheme(theme);
}
});

// 定义一个函数来应用主题
function applyTheme(theme) {
var body = document.body;
if (theme === 'dark') {
body.classList.add("dark-mode");
document.getElementById("darkModeToggle").checked = true;
} else {
body.classList.remove("dark-mode");
document.getElementById("darkModeToggle").checked = false;
}
}
</script>
```

GuoRuqiang 1 год назад
Родитель
Сommit
574d7a0914
2 измененных файлов с 21 добавлено и 2 удалено
  1. 8 2
      web/src/components/HeaderBar.js
  2. 13 0
      web/src/pages/Home/index.js

+ 8 - 2
web/src/components/HeaderBar.js

@@ -118,13 +118,19 @@ const HeaderBar = () => {
   useEffect(() => {
   useEffect(() => {
     if (theme === 'dark') {
     if (theme === 'dark') {
       document.body.setAttribute('theme-mode', 'dark');
       document.body.setAttribute('theme-mode', 'dark');
+    } else {
+      document.body.removeAttribute('theme-mode');
+    }
+    // 发送当前主题模式给子页面
+    const iframe = document.querySelector('iframe');
+    if (iframe) {
+      iframe.contentWindow.postMessage({ themeMode: theme }, '*');
     }
     }
 
 
     if (isNewYear) {
     if (isNewYear) {
       console.log('Happy New Year!');
       console.log('Happy New Year!');
     }
     }
-  }, []);
-
+  }, [theme]); // 监听 theme-mode 的变化
   return (
   return (
     <>
     <>
       <Layout>
       <Layout>

+ 13 - 0
web/src/pages/Home/index.js

@@ -35,6 +35,19 @@ const Home = () => {
       }
       }
       setHomePageContent(content);
       setHomePageContent(content);
       localStorage.setItem('home_page_content', content);
       localStorage.setItem('home_page_content', content);
+
+        // 如果内容是 URL,则发送主题模式
+        if (data.startsWith('https://')) {
+            const iframe = document.querySelector('iframe');
+            if (iframe) {
+                const theme = localStorage.getItem('theme-mode') || 'light';
+                // 测试是否正确传递theme-mode给iframe
+                // console.log('Sending theme-mode to iframe:', theme); 
+                iframe.onload = () => {
+                    iframe.contentWindow.postMessage({ themeMode: theme }, '*');
+                };
+            }
+        }
     } else {
     } else {
       showError(message);
       showError(message);
       setHomePageContent('加载首页内容失败...');
       setHomePageContent('加载首页内容失败...');