的index.html

Question

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

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

谢谢。

Answer 1

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

代码已经过了解，但您仍然可以看到这是如何完成的 link

修改

的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>

page.html中

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

以上更改了网址，您仍需要进一步开发代码才能获得完整功能，即（后退按钮）

您可以参考Page not reloading via 'back' when using pushState() / onpopstate添加此类功能

编辑：

The pushState() method

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

Answer 2

该技术被称为＆＃34; Single page application＆＃34; （a.k.a. SPA）。您可以使用任何您想要的框架或库创建SPA（例如AngularJS，ReactJS，jQuery等），只要您遵循一些指导原则即可。

单页面应用程序（SPA）是一种Web应用程序或网站适合单个网页，旨在提供更流畅的服务用户体验类似于桌面应用程序。在SPA中，要么全部必要的代码 - HTML，JavaScript和CSS - 用a检索单页加载，或适当的资源是动态的加载并根据需要添加到页面，通常是为了响应用户动作。

假设我们未提前加载所有内容，基本指南是：

当服务器第一次加载页面时，您将解密URL并返回相应的页面。页面应包含所有页面的相同模板，而html文件的专用部分仅保留用于动态内容。
- 例如，我网站中的所有页面都应该返回相同的标题并加载相同的javascript文件，根据URL，更改的部分只是我的#content元素，其中包含该特定页面的html。
当用户单击内部链接时，您执行以下操作：
- 使用event.preventDefault()
- 使用history API（history.pushState(stateObj, title, path)）
- 使用Ajax加载内容，并用新的内容替换现有内容。
收听popState events以检测由于使用后退和前进按钮而导致的网址更改。（window.addEventListener('popstate', handler)）
- 根据新网址加载内容。

注意：服务器需要使用Ajax提供内容（不包含模板的其余部分）。

关于＆＃34; How＆＃34;，只要您了解SPA的工作流程，这完全取决于您。

Answer 3

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

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

Answer 4

我不确定这个人是怎么做的，但你怎么能做到这一点：当用户单击菜单项时，使用ajax（无刷新）

加载内容

$(document).ready(function(){
    $("menu-item").click(function(){
          $("#content").load("something");
    });
 });

您可以更新网址with：

window.history.replaceState(“object or string”, “Title”, “/another-new-url”);

这会更新网址而不刷新

如果用户登陆特定网址，您可以根据网址传递所需数据，以加载正确的内容。

Answer 5

您也可以使用Meteor.js。

他们自己的网站是使用meteor.js构建的，您可以在该网站上清楚地看到您想要的功能。

Answer 6

您可以通过a layers in css (click here to know more)

实现相同目标

对于您建议的网站，将有三个层次

图片
标题（鼠标悬停时向下滚动）
背景图片（由标题隐藏）

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

6 个答案:

的index.html

page.html中