javascript - 转到下一页而不使用与索引页相同的标签

Question

我正在尝试为我的页面编写 Java 脚本函数。 “index.html”页面具有包含所有必要标签(html、head、title 和 body)的基本布局。我的问题是，我将如何进入下一页(如果您单击菜单项)而不必编写相同的标签并从“index.html”页面复制所有数据 - 即没有冗余代码。

例如有 3 个主要页面，不包括“index.html”页面(这个页面包含所有主要标签)。其他页面是1-关于2-联系3-画廊。在每个页面上，标签将只有:

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦

其他一些带有文字、照片等的标签

无需在每个页面上复制整个文档的代码即可更改标签内的文本/内容的 java 脚本函数的代码是什么？

我想使用 Chrome 作为默认浏览器，我只使用 HTML 和 Java 脚本(没有 PHP)

谢谢

Answer 1

使用可以使用此功能，这将解决您的问题，只需将您的 div Id 传递到您想要加载具有索引布局的页面内容的位置。在我的示例中，我将我的内容加载到容器 div 中。

/**
     * Load page into url
     *
     * @param url           The url to load
     * @param onleave       The function to call before leaving
     * @param onenter       The function to call after loading
     */
function loadPage(url, onleave, onenter) 

{
    alert(url);
    console.log("loadPage("+url+")");

    // If onleave function specified
    if (onleave) {
        onleave();
    }

    var xmlhttp = new XMLHttpRequest();

    // Callback function when XMLHttpRequest is ready
    xmlhttp.onreadystatechange=function(){
        if(xmlhttp.readyState === 4){
            if (xmlhttp.status === 200) {
                console.log("Received content"+xmlhttp.responseText);
                document.getElementById('container').innerHTML = xmlhttp.responseText;

                // If onenter function specified
                if (onenter) {
                    onenter();
                }
            }
            else {
                document.getElementById('container').innerHTML = "Error loading page " + url;
            }
        }
    };
    xmlhttp.open("GET", url , true);
    xmlhttp.send();
    return;
}