时间戳

首页 > 解决方案 > 如何在带有单个复选框的框架中启用暗模式？

javascript - 如何在带有单个复选框的框架中启用暗模式？

问题描述

我制作了一个如下图所示的网页，我实现了一个暗模式复选框，它使用 javascript 文件在 2 个不同的 CSS 之间切换。但是，当我的页面分为框架时，我不知道如何实现相同的功能。

我的网页看起来像这样

单击暗模式只会更改 Frame1 的颜色。

这是我正在使用的 javascript 函数

$('#mode').change(function(){   

    if ($(this).prop('checked'))
    {
        document.getElementById('pagestyle').setAttribute('href', "darkstyle.css");
        localStorage.setItem('theme', 'dark');
    }
    else
    {
        document.getElementById('pagestyle').setAttribute('href', "style.css");
        localStorage.setItem('theme', 'light');

    }

});

总网页代码：

<!DOCTYPE html>
<html>
<frameset rows="10%,*">
  <frame src="adminFrame1.html" scrolling="no" frameborder="0">
  <frameset cols="20%,*">
    <frame src="adminFrame2.html" scrolling="no" frameborder="0">
    <frame src="adminFrameAdd.html" scrolling="no" frameborder="0">
  </frameset>
</frameset>
<head>
    <title>Admin Things</title>
</head>
<body>

</body>
</html>

框架1的代码

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
    <title>Team8 Library</title>
    <link rel="stylesheet" id="pagestyle" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 


    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.deep_purple-purple.min.css" />
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

</head>
<body style="background-color: #820077;">
<div class="topnav">    
    <a href="index.html">Logout</a>
    <!--<a href="#login">Login</a>  -->
    <label for="mode" id="cbox"><input id="mode" type="checkbox"> Dark Mode</label>
</div>
<h1 style="font-family: roboto; color: white; font-size: 3em; margin: auto; text-align: center;">Welcome Admin</h1>
<script type="text/javascript" src="changeCSS.js"></script>
</body>
</html>

框架3的代码

<!DOCTYPE html>
<html>
<head>
    <title>AdminAdd</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.purple-deep_purple.min.css" />
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body style="background: linear-gradient(to right, white, #e3a1fa); ">
    <div id="signup" style="width: 75%;margin: auto;box-shadow: 3px 3px 5px grey; display: block; margin-top: 15%; padding-bottom: 2em; background: #fff;">
        <form action="#">
              <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" style="display: block;text-align: center; margin: auto;">
                <input class="mdl-textfield__input" type="text" id="sample1">
                <label class="mdl-textfield__label" for="sample1" style="color: indigo;">Username <span style="color: red; font-size: 0.75em;">(Required)</span></label>
              </div>

              <div>
                <input type="submit" name="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" style="display: block; margin: auto;">
              </div>

        </form>
    </div>

<script type="text/javascript" src="changeCSS.js"></script>
</body>
</html>

标签： javascripthtmlcss

解决方案

您可以访问 iframe 文档并设置样式，就像在代码中一样：

<script type="text/javascript">
    var iframes = document.querySelectorAll('iframe');

    $('#mode').change(function () {
        if ($(this).prop('checked')) {
            document.getElementById('pagestyle').setAttribute('href', "darkstyle.css");

            iframes.forEach(function(iframe) {
                var doc = iframe.contentWindow.document;
                doc.getElementById('pagestyle').setAttribute('href', "darkstyle.css");
            })
            localStorage.setItem('theme', 'dark');
        }
        else {
            document.getElementById('pagestyle').setAttribute('href', "style.css");

            iframes.forEach(function(iframe) {
                var doc = iframe.contentWindow.document;
                doc.getElementById('pagestyle').setAttribute('href', "style.css");
            })
            localStorage.setItem('theme', 'light');

        }

    });
</script>

推荐阅读