Question

我制作了一个如下图所示的网页，我实现了一个暗模式复选框，该复选框使用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>

Answer 1

您可以访问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>

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

1 个答案: