logo标签列表

在浏览网页时固定不动的标题栏（不会重新加载）

javascriptjqueryhtmlcssheader
5
我发现一个网站的所有页面都有相同的标题，当浏览页面时，标题永远不会重新加载。标题加载一次后，它就会固定在原位，页面的其余布局（内容和页脚）会从页面到页面加载。这几乎就像使用框架集一样，但实际上并不是。将鼠标悬停在上部菜单上并单击任何项目，您就会明白我的意思。
这种技术叫什么？我想知道它的名称，以便我可以研究并学习它。
谢谢。
2
让我惊讶的是，竟然没有人回答你的问题。这种技术被称为“单页应用程序”（SPA）。https://en.wikipedia.org/wiki/Single-page_application - iMoses
非常直接的答案，谢谢。 - Cain Nuke
您应该将得到悬赏的答案标记为“已接受”。 - Robert Bradley
6个回答
9

在审核您提交的网站后，我找到了一个JavaScript文件，正如许多人建议的那样，该文件使用Ajax将内容加载到页面中而无需重新加载页面，在网页加载完成后，脚本触发哈希更改，使用window.history.pushState()来更改URL以匹配您单击的链接，正如@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>

以上代码更改了网址，您仍需进一步开发代码以获得完整功能，例如返回按钮。

您可以参考使用pushState() / onpopstate时页面不重新加载来添加此类功能。

编辑：

pushState()方法：

根据文档所述，pushState() 方法接收 3 个参数：

  1. 包含与新历史记录条目相关的序列化信息的状态对象，

  2. 页面标题，和

  3. 页面 URL。

每当用户导航到新的历史记录条目时，popstate 方法会被触发并且状态会改变以表示当前状态。

我尝试了这段代码，但它没有起作用。当我点击链接时什么也没发生。 - Cain Nuke
编辑：现在它可以工作了，但我不得不将脚本移到头部。这样可以吗？我有一些问题：foo:'bar'}部分是什么意思？此外，<title>似乎也会自动更改为page2，这很好，所以我想知道是否可以指定加载page2.html的哪些部分和不加载哪些部分？ - Cain Nuke
@CainNuke如果你不知道脚本应该放在哪里，我强烈建议先学习基础知识。 - Sven van den Boogaart
4
这种技术称为“单页应用程序”（Single page application，SPA），它可以使用任何你想要的框架或库来创建（例如AngularJS、ReactJS、jQuery等），只要你遵循一些指导方针。

单页应用程序（SPA）是一种网络应用或网站，旨在提供类似于桌面应用程序的更流畅的用户体验，并适合于单个网页。在SPA中，所有必要的代码——HTML、JavaScript和CSS——要么通过单个页面加载检索，要么根据需要动态地加载并添加到页面中，通常是响应用户操作。

假设我们没有预先加载所有内容，基本的指导方针如下：
当服务器首次加载页面时，您需要解密URL并返回相应的页面。页面应该包含相同的模板，而只有html文件的专用部分保留用于动态内容。
例如，我的网站中所有页面都应该返回相同的标题并加载相同的javascript文件，仅更改的部分是包含特定页面的html的#content元素，根据URL确定。
当用户点击内部链接时，您需要执行以下操作：
防止链接导航，使用event.preventDefault() 使用历史API（history.pushState(stateObj, title, path)）自己更改URL
使用Ajax加载内容并将现有内容替换为新内容。
监听popState事件以检测由于使用后退和前进按钮而导致的URL更改。 （window.addEventListener('popstate', handler)）
根据新的URL加载内容。
注意：服务器需要使用Ajax提供内容（不包括其余模板）。
关于“如何”，完全取决于您是否了解SPA的工作流程。
1
网页是使用PHP构建的。 - Rick
谢谢，我会看一下的。我知道这个页面是用php编写的，但这种技术也可以用于html页面吗？我尝试将网站下载到我的电脑上，但菜单甚至都不显示在这里。 - Cain Nuke
是的，您可以在HTML页面上实现它。它不起作用的原因是JQuery文件必须是外部的。他所做的是使用JQuery（隐藏和显示方法）。您可以访问上述网站以了解更多信息。希望您已经得到了答案 :-) - Rick
URL的更改是通过pushState完成的。因此，它看起来像是加载了一个不同的页面，但实际上并没有。它只是使用JavaScript操纵URL。 - escapedcat
@javiercf 我猜它是使用Angular。 - Rick
显示剩余2条评论
1
你也可以使用Meteor.js进行编程。
他们自己的网站是使用meteor.js构建的，你可以在该网站上清晰地看到所需的功能。
1

我不确定这个人是如何做到的，但你可以这样实现：

当用户点击菜单项时，使用ajax加载内容（无需刷新）。

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

您可以使用以下代码更新URL with：

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

这将在不刷新页面的情况下更新URL。
如果用户登陆特定的URL，您可以根据URL传递所需数据以加载正确的内容。
这是一个非常有趣的解决方案。简单而实用。我猜想，我应该将"something"替换为内容的名称？ - Cain Nuke
@CainNuke 是的，你后端给出的ajax调用将会有一个响应。 - Sven van den Boogaart
对象或字符串是什么意思？我有这个：{'page_id': 1，'user_id': 5}；但我不太明白它的用途是什么。 - Cain Nuke
@CainNuke history.replaceState() 的操作与 history.pushState() 完全相同，只是 replaceState() 修改当前历史记录项而不是创建一个新的。请注意，这不会阻止在全局浏览器历史记录中创建新条目。当您希望响应某些用户操作更新当前历史记录项的状态对象或 URL 时，replaceState() 特别有用。https://developer.mozilla.org/zh-CN/docs/Web/API/History_API - Sven van den Boogaart
@CainNuke，你能发布一下你现在已经写好的代码吗？ - javiercf
显示剩余3条评论
0
但是当您转到另一页时，页眉会重新加载，不是吗？ - Cain Nuke
不行，如果你在第二层使用鼠标悬停函数，因为你只是通过JQuerry替换了第一层和第三层。 - Rick
嗯...标题仍将重新加载。只是有一种假象，好像它没有重新加载。如果您没有悬停在元素上，则此方法将无效。 - Lisa
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接