如何加载页眉，更改它，然后重定向到具有更新页眉的页面

How can I load a header, change it, then redirect to a page with the updated header?

本文关键字：重定向 更新 然后 何加载 加载      更新时间：2023-09-26

我有3个html文档：header.html、blackPage.html和greenPage.html。CCD_ 4对于CCD_ 5和CCD_。我想使用一个名为HeaderScript.js的脚本，使标题中用于更改页面的按钮反映当前页面的颜色。我该怎么做？（这只是一个例子：在实际应用程序中，绿色页面上没有足够的信息来确定标题应该是什么，所以我不能在加载绿色页面时更新它）。

以下是我正在使用的4个文件：

header.html

<html>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src=HeaderScript.js></script>
    <script>
        $(document).ready(function(){
            $("#Button").click(function(){
                changePage($("#Button").get(0));
            });
        });
    </script>
    <style>
        #Button {
            height: 80px;
            width: 80px;
            background-color: black;
        }
    </style>
    <div id="Button"></div>
</html>

blackPage.html

<html>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function(){
            $("#Header").load("header.html");
        });
    </script>
    <Title>Black Page</Title>
    <h>Black Page</h>
    <div id="Header"></div>
</html>

greenPage.html

<html>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function(){
            $("#Header").load("header.html");
        });
    </script>
    <Title>Green Page</Title>
    <h>Green Page</h>
    <div id="Header"></div>
 </html>

HeaderScript.js

function changePage(div){
    if (div.style.backgroundColor === "green"){
        div.style.backgroundColor = "black";
        alert("Color changed to black");
        document.location.href = "blackPage.html";
    }
    else{
        div.style.backgroundColor = "green";
        alert("Color changed to green");
        document.location.href = "greenPage.html";
    }
}

新header.html页面代码：

<html>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">    </script>
    <script src="HeaderScript.js"></script>
    <script>
        $(document).ready(function(){
            var path = window.location.pathname;
            path = path.substr(path.lastIndexOf('/') + 1,
                       path.indexOf('Page.html') - path.lastIndexOf('/') - 1);
            $("#Button").css('background-color', path);
            $("#Button").click(function(){
                path = (path == 'green' ? 'black' : 'green');
                $("#Button").css('background-color', path);
                window.location = path + 'Page.html';
            });
        });
    </script>
    <style>
        #Button {
            height: 80px;
            width: 80px;
        }
    </style>
    <div id="Button"></div>
</html>

希望奏效；）让我知道。。

ThatWeirdo的答案是有效的，他的答案在页面更改之前加载颜色（与此解决方案相反），但对于这个问题只是一个例子的特定问题，我需要采取不同的做法（我的原始代码是垃圾，所以我制作这个例子是为了让它更简单/更清晰）。

以下是我最终要做的事情（假设blackPage.html总是加载的第一个页面）：

header.html

<html>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src=HeaderScript.js></script>
    <script>
        $(document).ready(function(){
            //--ADDED--
            var buttonColor = localStorage.buttonColor;
            if(buttonColor !== undefined){
                $("#Button").css("background-color", buttonColor);
            }
            //----
            $("#Button").click(function(){
                changePage($("#Button").get(0));
            });
        });
    </script>
    <style>
        #Button {
            height: 80px;
            width: 80px;
            background-color: black;
        }
    </style>
    <div id="Button"></div>
</html>

HeaderScript.js

function changePage(div){
    if (localStorage.buttonColor === "green"){ //CHANGED
        localStorage.buttonColor = "black"; //CHANGED
        alert("Color changed to black");
        document.location.href = "blackPage.html";
    }
    else{
        localStorage.buttonColor = "green"; //CHANGED
        alert("Color changed to green");
        document.location.href = "greenPage.html";
    }
}
相关文章：