如何加載標題，更改標題，然后重定向到包含更新標題的頁面？

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