History.js - 正确的实现

2023-12-27

我使用 JQuery/Ajax 在名为 #container 的 div 中加载网站上的内容。我必须有不同类型的链接:

  1. 正常锚链接
  2. JQuery-触发器,当单击特定 div 时触发事件。

现在我想添加功能来支持后退和前进浏览器按钮以及书签功能。我遇到了history.js,但我遇到了一些问题,并且找不到如何正确使用它的真正简单的教程。

我的链接:

<a href='#imprint' class='link_imprint'>Imprint</a>

我读到 SEO 使用效果更好<a href="imprint/"...但在我的服务器上找不到该 URL。所以我的first问题是,我如何确保 myurl.com/imprint 正常工作并且不会导致 404 页面?

来到history.js...目前我在index.php中包含了以下代码,就在<body>

<script>
        $(document).ready(function(){

        (function(window,undefined){

            // Prepare
            var History = window.History; // Note: We are using a capital H instead of a lower h
            if ( !History.enabled ) {
                 // History.js is disabled for this browser.
                 // This is because we can optionally choose to support HTML4 browsers or not.
            return false;
            }

            // Bind to StateChange Event
            History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
                alert("state");
                var State = History.getState(); // Note: We are using History.getState() instead of event.state         

            });

            History.Adapter.bind(window,'anchorchange',function(){

            });

            var currentState = History.getState();
            var currentUrl = currentState.url;
            var urlParts = currentUrl.split('#');

            $('#container').load('templates/'+ urlParts[1] +'.php');

            $('#footer.credits').on('click','.link_imprint',function() {

                var currentUrl = $(this).attr('href');
                var urlParts = currentUrl.split('#');   

                History.pushState(null,null,currentUrl);

                $('#container').load('templates/'+ urlParts[1] +'.php');
            });
})(window);
});

使用此代码,单击链接后,URL 更改为:myurl/#imprint 并且 imprint.php 被加载到 container.php 中。但是,当我现在单击后退按钮时,URL 会发生变化,但内容仍然是印记中的内容。如何确保容器刷新旧内容?我想我忘记了什么,但我不知道我应该做什么。我尝试使用 statechange/anchorstate 但当我单击后退按钮时,这两个事件都不会被触发。

谢谢你的协助。

P.S:我向状态更改事件添加了警报,但它永远不会被触发。这不可能是正确的,对吧?当我点击链接并且 url 更改为 myurl.com/#imprint 时,我可以看到锚更改事件触发...


对于较旧的浏览器,您可以使用此库:https://github.com/devote/HTML5-History-API https://github.com/devote/HTML5-History-API它完全模拟旧浏览器中的历史。

$( document ).ready(function() {

    function loadContent( href ) {
        alert( "loading content... from url: " + href );

        // load dynamic content here
    }

    $( window ).bind( 'popstate', function( e ) {

        // the library returns the normal URL from the event object
        var cLocation = history.location || document.location;

        alert( [ cLocation.href, history.state ] );

        loadContent( cLocation.pathname + cLocation.search + cLocation.hash );
    });

    $('#footer.credits').on('click','.link_imprint',function() {

        var currentUrl = $( this ).attr( 'href' );

        loadContent( currentUrl );

        history.pushState( null, null, currentUrl );
    });
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

History.js - 正确的实现 的相关文章

随机推荐

  • 无法让 Coverity Scan 工作(Windows 和 Travis 上的 Java/Kotlin/Gradle 3.3)

    更新 请参阅 Caleb 的答案中的解决方案 我正在非常努力地让 Coverity 为我的构建工作 但到目前为止收效甚微 首先是细节 我的项目是普通的 java 库 没有 Web 或花哨的容器 只有很少的编译依赖项 使用 Gradle 构建
  • 字典有密钥长度限制吗?

    我想知道Python是否对字典键的长度有限制 为了澄清起见 我不是在谈论密钥的数量 而是每个密钥的长度 我将根据动态值 验证后 构建我的字典 但我不确定在这种情况下是否应该考虑长度 对于字典键没有这样的限制 由于 python 对数字类型也
  • Angularjs - 隐藏内容直到 DOM 加载

    我在 Angularjs 中遇到一个问题 在我的数据从服务器返回之前 我的 HTML 中出现闪烁 这是演示该问题的视频 http youtu be husTG3dMFOM http youtu be husTG3dMFOM 注意 和右侧的灰
  • NotificationCompat 无法解析为类型

    我是 Android 新手 收到错误消息 NotificationCompat 无法解析为类型 MinSDK 9 TargetSDK 18 到目前为止 所有消息来源对于如何解决这个问题都非常模糊 只是简单地注明 更新 JAR 文件 我需要什
  • 排序数据透视表(多索引)

    在数据透视表上放置两个 行标签 Excel 术语 后 我尝试按降序对数据透视表的值进行排序 样本数据 x pd DataFrame col1 a a b c c a b c a b c col2 1 1 1 1 1 2 2 2 3 3 3
  • 使用 UIImagePicker 一次后出现内存警告

    我提到了这个非常好的参考 https stackoverflow com questions 1282830 uiimagepickercontroller uiimage memory and more https stackoverfl
  • 在哪里放置InternalsVisibleTo

    与这个问题相关的是 AssemblyInfo 的生成是如何工作的 我一直把InternalsVisibleTo在程序集第一类的文件中 我意识到它会很有用 将 AssemblyInfo 与其他程序集属性放在一起似乎更合适 但我不希望它被无意中
  • 让 mysql select 语句返回完全限定的列名,例如 table.field

    有没有办法让 mysql select 语句返回完全限定的列名 如 table field 而不用对每个字段使用 AS like so SELECT FROM table1 LEFT JOIN table2 on table1 f ID t
  • iOS 6:收到推送通知后更新视图,但应用程序已关闭

    应用程序收到推送通知后 我想更改主屏幕上一些按钮的标题ViewController 为了实现这种行为 我在我的应用程序委托中覆盖了该方法application didReceiveRemoteNotification 重新实例化UINavi
  • 内连接mysql表

    好的 就在这里 我有两个表 产品和产品尺寸 所以基本上我的产品表有 id 主键 名称 产品名称 和 size id 来自 Product sizes 的外键 我的product sizes 表有预定值 size id name 1 1x1
  • NumPy - 涉及范围迭代器的矢量化循环

    有什么方法可以在没有 for 循环的情况下完成这项工作吗 import import numpy as np import matplotlib pyplot as plt L 1 N 255 dh 2 L N dh2 dh dh phi
  • 每种类型都有独特的变质作用吗?

    最近我终于开始觉得我理解了变形论 我写了一些关于他们的文章最近的一个答案 https stackoverflow com a 46555360 625403 但简单地说 类型的变形是递归遍历该类型的值的过程的抽象 该类型上的模式匹配具体化为
  • Yii2 重定向到上一页

    现在我的应用程序正在使用 gridview 列出所有信息 并且它也有分页 当用户单击分页号 然后单击编辑然后保存时 它将用户重定向到查看页面 我想做的是将用户重定向到上一页 带有分页号的网址 你可以使用Yii app gt request
  • 检测更改的输入文本框

    我查看了许多其他问题并找到了非常简单的答案 包括下面的代码 我只是想检测有人更改文本框的内容 但由于某种原因它不起作用 我没有收到控制台错误 当我在浏览器中设置断点时change 函数它永远不会击中它 inputDatabaseName c
  • System.Net.Mail 引用不存在

    我在创建发送电子邮件的应用程序时遇到问题 我已经有一个作为 Windows 窗体应用程序工作 然后决定从空项目中执行相同的操作 因为我现在需要创建一个后台应用程序 我用的是System Net MailWindows 窗体中的名称空间 然后
  • 跨浏览器事件处理

    我需要一个跨浏览器功能来注册事件处理程序和 大部分 一致的处理程序体验 我不需要 jQuery 等库的全部功能或功能 因此我编写了自己的库 我相信我已经用下面的代码实现了我的目标 到目前为止我的测试已经成功 但我已经盯着它太久了 我的逻辑是
  • Android ListView 与简单适配器

    我创建ListView列出从服务器检索的一些数据的活动 这是列出Atm活动 public class ListAtmActivity extends ListActivity private static String url http 1
  • 在 C# 中创建 MS Teams 团队 - AddAsync 返回 null

    Context 我正在使用 C 中的 MS Graph API 创建新的 MS Teams 团队 My code var newTeam new Team DisplayName model DisplayName Description
  • 如何将两个 MySQL 列合并为一列?

    我想转换这个 MySQL 表 title1 title2 type qwe1 qwe2 3 asd1 asd2 7 PHP 中的此表 title type asd1 7 asd2 7 qwe1 3 qwe1 3 但我不知道如何按第一列正确排
  • History.js - 正确的实现

    我使用 JQuery Ajax 在名为 container 的 div 中加载网站上的内容 我必须有不同类型的链接 正常锚链接 JQuery 触发器 当单击特定 div 时触发事件 现在我想添加功能来支持后退和前进浏览器按钮以及书签功能 我