在浏览页面时保持固定的标题(永远不会重新加载)

Question

在浏览页面时保持固定的标题(永远不会重新加载)

Cai*_*uke 3 html javascript jquery header css3

我发现一个网站对于所有页面都有相同的标题,这些页面在浏览页面时从不重新加载.标头加载一次后,它会保留在原位,其余的布局(内容和页脚)会在页面之间加载.它几乎就像你有一个框架集但不是.鼠标悬停在上方菜单上并单击任何项目,您将看到我的意思.

这种技术叫做什么？我想知道这个名字,所以我可以研究它并学习它.

谢谢.

Answer 1

在审核了您提交的网站后,我找到了一个javascript文件,正如许多人建议的那样,使用ajax将内容加载到页面中而不重新加载它,在加载网页后,脚本触发了一个hashchange,它改变了url以匹配你window.history.pushState按照@escapedcat的建议点击了一个,javascript也会处理动画并更改网页中某些元素的类以反映它的状态(更新等等).

代码是uglified但你仍然可以看到这是如何完成链接

编辑

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page 1</title>
</head>
<body>
    <header>
        <nav><a href="page.html">Link</a></nav>
    </header>
    <div id="content">
        this is the default content
    </div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
    $('nav a').on('click', function(e){
        e.preventDefault();
        console.log('test');

        $.get(this.href, function(data){
            $('#content').html(data);
            console.log(this);
            history.pushState({foo:'bar'}, 'second page', 'page.html');
        });

    });
    </script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

page.html中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page 2</title>
</head>
<body>
    This is page 2
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

以上更改了url,你还需要进一步开发代码才能获得完整的功能即(后退按钮)

当使用pushState()/ onpopstate添加这种功能时,你可以通过'后'来引用页面而不是重新加载

编辑:

pushState()方法

正如文档所述,pushState方法接收3个参数,一个包含与新历史条目,页面标题和页面URL相关联的序列化信息的状态对象,每次用户导航到新的历史条目时,弹出popstate方法并且状态更改表示当前状态

Answer 2

Ric*_*ick 1

使用的技术是Angular JS。如果你想学习这项技术，你可以使用http://www.w3schools.com/angular/或http://www.tutorialspoint.com/angularjs/

如果您想查看页面源代码，您可以右键单击，然后转到检查，然后右键单击，然后转到检查查看页面源代码。通过检查，您将看到后端发生的实时变化。

归档时间：	9 年，9 月前
查看次数：	3043 次
最近记录：	9 年，8 月前