Question

我尝试在包含相同页眉和页脚的3个页面之间导航，但每个页面都有不同的内容。我想在哈希变化上加载不同的内容html。问题是当我再次点击同一页面时，再次加载了content.html。

如何在不使用java脚本/ html / jquery一次又一次地加载html的情况下使用内容？

代码示例：

Navigationbar.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Navigation Bar</title>
    <link rel="stylesheet" type="text/css" href="css/navigationbar.css">

</head>
<body>
<nav>
    <img id="navigation-bar-logo" class="logo" src='images/flybryceLogo.png'>
    <ul class="navigation-bar-ul">
        <li class="navigation-bar-li"><a id="navigation-bar-contact-page-tab" href="#contact.html">CONTACT</a></li>
        <li class="navigation-bar-li"><a id="navigation-bar-about-us-page-tab" href="#aboutus.html">ABOUT US</a></li>
        <li class="navigation-bar-li"><a id="navigation-bar-home-page-tab" href="#home.html">HOME</a></li>
    </ul>
</nav>
</body>
</html>

initial.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>One Page Test</title>
    <link rel="stylesheet" type="text/css" href="css/homepage.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div id="main-container" class="main-container">
    <div id="header" class="header">
    </div>
    <div id="content" class="content"></div>
    <div id="footer" class="bot"></div>
</div>

<script>
    document.onreadystatechange = function(){
        if (document.readyState == 'complete') {
            window.onhashchange=hash_change;
            window.onload=hash_change;
            if(window.location.hash==''){
                //default hash
                window.location.replace('#home.html');
            }

            //load the header
            $("#header").load("fragments/navigationbar.html");
            //load the footer
            $("#footer").load("fragments/footer.html");
        }
    }

    function hash_change()
    {
        //get the new hash
       var newHashCode =  window.location.hash.substring(1);

        if (newHashCode === "home.html"){
            $("#content").load("home.html");

        } else if (newHashCode === "aboutus.html") {
            $("#content").load("aboutus.html");

        } else if (newHashCode === "contact.html"){
            $("#content").load("contact.html");

        }

    }
</script>
</body>
</html>

Answer 1

更长但更合适的解决方案是自行构建内容缓存。

例如，只需要向服务器询问一次html，然后将其设置为$('#content')元素。您可以使用此辅助函数。

var contentsCache = {};
var getAndCache = function(url, callback) {
    var cachedContents = contentsCache[url];

    if (!cachedContents) {
        $.get(url, function(serverContents) {
            cachedContents = serverContents;
            contentsCache[url] = cachedContents;
            callback(cachedContents);
        });
    } else {
        callback(cachedContents);
    }
};

然后通过调用这种新的异步方式替换$('#content').load调用。

function hash_change()
{
   var fillContentCb = function(s) { 
       $('#content').html(s);
   };
    //get the new hash
   var newHashCode =  window.location.hash.substring(1);

   if (newHashCode === "home.html"){
        getAndCache("home.html", fillContentCb);

   } else if (newHashCode === "aboutus.html") {
        getAndCache("aboutus.html", fillContentCb);
   } else if (newHashCode === "contact.html"){
        getAndCache("content.html", fillContentCb);
   }
}

正如一些评论中所建议的那样，请考虑使用原生HTML导航。另一个建议是使用客户端JS框架，如果此应用程序可能会增长，它支持路由。

Answer 2

添加一个if条件，检查当前哈希位置是否与单击的哈希位置匹配，以及是否只返回。您必须将其存储在全局JS变量中，并在每次导航时进行设置。

页面之间的导航 - html

2 个答案: