Question

我目前是初学者JavaScript学习者。我正在尝试在Facebook等各种顶级网站上发现的一些特殊代码逻辑。其中一个我在这里找到：How does Facebook keep the header and footer fixed while loading a different page?。但是我无法正确执行它。以下是我的代码：

<html>
<head>
</head>
<body>
<div id="header">TEST HEADER
<a href="sample2.htm">SAMPLE</a></div>
<p>OUTSIDE</p>
    <script type='text/javascript'>
        var header = document.getElementById('header');
        var headerLinks = header.getElementsByTagName('a');

        for (var i = 0, l = headerLinks.length; i < l; i++) {
            headerLinks[i].onclick = function () {
                var href = this.href;

                //Load the AJAX page (this is a whole other topic)
                loadPage(href);

                //Update the address bar to make it look like you were redirected
                location.hash = '#' + href;

                //Unfocus the link to make it look like you were redirected
                this.blur();

                //Prevent the natural HTTP redirect
                return false;
            }
        }
</script>
</body>
</html>

请告诉我我做错了什么？

实际上，我的代码的动机不仅仅是在页面上保留标题，而且还在导航到其他页面时。导航到其他页面时，不应重新加载标题。

Bill F的回答解决方案：

忘记定义loadPage()功能：

<script type="text/javascript">
        function loadPage() {
            document.getElementById("content").innerHTML = '<object type="type/html" data="sample2.htm" ></object>';
        }
    </script>

Answer 1

你还没有定义函数loadPage就是你做错了。据推测，该函数将使用AJAX来检索页面的内容，无论是JSON，HTML，XML，CSV等等。

Answer 2

即使在使用位置进行滚动时，也可以保持div的位置固定：固定

#header
{
position:fixed;
}

Answer 3

我已经成功地完成了所有您需要做的就是创建2个单独的容器div，1个用于导航栏（您想要保留）和2个用于您想要更改的内容然后只需从中检索数据外部页面

代码表示

<div class="container_for_persistent_nav-bar">
</div>

<div class="container_for_divs_that_are_not_persistent">
</div>

然后只需将click事件绑定到链接，然后单击清除div容器中的NON_PERSISTENT DIVS，然后单击2.从单独的页面加载div

无法像Facebook一样坚持标题

3 个答案: