如何加载标题，更改标题，然后重定向到包含更新标题的页面？

Question

我有3个html文档： header.html ， blackPage.html和greenPage.html 。 header.html对blackPage.html和greenPage.html都是通用的。 我想这样做，以便标题中的按钮（用于更改页面）使用名为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";
    }
}

Answer 1

新的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>

希望有效;）让我知道..

Answer 2

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";
    }
}

如何加载标题，更改标题，然后重定向到包含更新标题的页面？

问题描述

了header.html

blackPage.html

greenPage.html

HeaderScript.js

2 个解决方案

解决方案1
1 2014-04-12 23:09:34

解决方案2
0 2014-04-13 04:37:32

了header.html

HeaderScript.js

如何加载标题，更改标题，然后重定向到包含更新标题的页面？

问题描述

了header.html

blackPage.html

greenPage.html

HeaderScript.js

2 个解决方案

解决方案1 1 2014-04-12 23:09:34

解决方案2 0 2014-04-13 04:37:32

了header.html

HeaderScript.js

解决方案1
1 2014-04-12 23:09:34

解决方案2
0 2014-04-13 04:37:32