启用暗模式时更改 iframe 源，禁用暗模式时将其更改回来

Posted 2023-05-09

【中文标题】启用暗模式时更改 iframe 源，禁用暗模式时将其更改回来

【英文标题】：Change iframe source when dark mode is enabled and change it back when dark mode is disabled

【发布时间】：2020-12-06 04:21:42

【问题描述】：

目标：我想在onclick="toggleDarkMode() 被激活时更改 iFrame 的来源，并在onclick="toggleDarkMode() 被禁用时更改回来。

问题：当onclick="toggleDarkMode() 激活为“//www.twitch.tv/embed/yaydank/chat?parent=”时，我当前的“暗模式”按钮仅更改 iFrame 源一次icelz.s3.amazonaws.com&darkpopout”。然后，当我再次单击它时，它不会将源更改回“//www.twitch.tv/embed/yaydank/chat?parent=icelz.s3.amazonaws.com&popout”。如果有人能帮我解决这个问题，我将不胜感激。提前谢谢你。

页面加载时我当前的默认 iframe 代码：

<iframe id="myFrame" src="//www.twitch.tv/embed/yaydank/chat?parent=icelz.s3.amazonaws.com&popout" frameborder="0" scrolling="no"  ></iframe>

我当前的javascript代码，当onclick="toggleDarkMode()被激活时会改变iframe的来源：

<script>
function myFunctionDark() 
    document.getElementById("myFrame").src = "//www.twitch.tv/embed/yaydank/chat?parent=icelz.s3.amazonaws.com&darkpopout";


</script>

这是我当前的“黑暗模式”按钮，触发“toggleDarkMode”和“myFunctionDark”功能：

<i class="material-icons dropdown-toggle" onclick="toggleDarkMode();myFunctionDark()" data-tooltip="Dark Mode" data-tooltip-pos="left">wb_sunny</i>

LIVE LINK WHERE THE PROBLEM IS PRESENT（“黑暗模式”按钮在右上角”）

【参考方案1】：

你总是在执行 myFunctionDark() 并且它只会让聊天变暗。尝试像这样在里面设置一个条件：

function myFunctionDark() 
  if($(".app-container").hasClass("dark")) 
    document.getElementById("myFrame").src = "//www.twitch.tv/embed/yaydank/chat?parent=icelz.s3.amazonaws.com&darkpopout";
   else 
    document.getElementById("myFrame").src = "//www.twitch.tv/embed/yaydank/chat?parent=icelz.s3.amazonaws.com&popout";