有没有办法在javascript中循环"历史"对象以查找历史记录中的特定页面？

是否可以更改浏览器地址栏中显示的URL而无需浏览器转到该页面？例如,在通过AJAX调用更新页面内容之后？

我的理解是这是不可能的,这就是为什么诸如twitter和facebook之类的网站更新了ajax调用的hash-tag.

直到今天,当我继续使用http://8tracks.com/并开始使用右侧的过滤器...打开和关闭不同类型时,我注意到即使它正在执行ajax调用刷新页面上的内容,URL也在动态更新.

有谁知道他们是怎么做到的？

(除此之外,我目前正在使用Chrome,但当我回去再次使用IE9时,我注意到该网址未被更新..这可能只是Chrome的一部分吗？)

我想记录历史记录网址或上次加载的网址,而无需手动存储历史记录网址.那可能吗？

当用户点击"后退"按钮时,有没有办法使用JS访问上一页的历史状态？

我的backbone.js有三个视图:

1. 类别清单
2. 类别中的项目列表
3. 个别项目的表格

我正在使用backbone.js路由器在这些视图之间导航.用户在应用程序中流动1 < - > 2,2 < - > 3和3 - > 1.用户可以使用浏览器后退和前进按钮来回导航,这是想要的行为.深度链接到任何项目也有效.

问题是我想保持历史清洁.这是一个示例用法流程:

• 用户打开类别列表.历史:"类别列表"(正确)
• 用户选择"我的类别".历史:"我的类别"<"类别列表"(正确)
• 用户选择"我的项目".历史:"我的项目"<"我的类别"<"类别列表"(正确)
• 用户填写表格并保存,重定向到"类别列表".历史:"类别列表"<"我的项目"<"我的类别"<"类别列表"(应该只是"类别列表")

另一个例子:

• 用户打开"我的类别"的URL
• 用户按下主页按钮.历史:"类别列表"<"我的类别",应该是"类别列表"

关于如何以干净的方式实现这一点的任何想法？

请注意,我不认为此问题与Backbone或JavaScript有关,但有必要在问题上包含一些Backbone代码作为上下文.

相关守则

我有一个客户端Backbone路由器,其路由采用一个名为的参数contactId.它看起来类似于:

Backbone.Router.extend({

  routes: {
    "jobs/new?contact_id=:contactId": "newForContact"
  },

  // Fetch the contact and initialize a new job model which 
  // is associated with that contact.
  newForContact: function(contactId) {
    var contact = new Contact(id: contactId);
    contact.fetch({
      success: _.bind(function(model, resp) {
        var job = new Job(contact: contact);
        this.new(job);
      }
    }, this));
  },

  // Show the JobView for the given job.
  new: function(jobModel) {
    view = new JobView(job: jobModel);
    $('body').append(view.render().el);
  }
};

现在我正在尝试pushState打开时使用此设置.

当我点击触发newForContact路线的路线时,一切都按预期工作.但是,如果我此时按下浏览器的后退按钮,我将 …

我能够整理一个简化的完整History.js示例,使用三个链接从整页加载内容片段,而无需更新页面和更新浏览器历史记录.

以下是相关的代码片段 - 这里有一个完整的工作示例http://jsfiddle.net/PT7qx/show

<a href="/page-header">Page Header</a>
<a href="/login-form">Login Form</a>
<a href="/nothing">Nothing</a>

<script>
var History = window.History;
if (!History.enabled) {
    return false;
}

History.Adapter.bind(window, 'statechange', function() {
    var State = History.getState();
    History.log(State.data, State.title, State.url);

    if (State.title == 'Page Header') {
        $('#content').load('/user/login/ .pageHeader > *');
    }

    if (State.title == 'Login Form') {
        $('#content').load('/user/login/ #common-form > *');
    }

    if (State.title == 'Nothing') {
        $('#content').empty()
    }
});

$('body').on('click', 'a', function(e) {

    var urlPath = $(this).attr('href');
    var Title = $(this).text();
    History.pushState(null, Title, urlPath); …

是否可以有选择地从Google Chrome浏览历史记录中删除项目？我的历史记录中有一个网站,每次我开始使用特定字母进行搜索时都希望成为默认网站,但我经常会参考我的历史来重新查找内容.

所以我想从www.pythonismyfavoritest.com中删除所有历史记录而不删除所有内容; 那可能吗？

我们可以使用它window.location.replace来避免历史记录，并定位页面锚，而无需重新加载页面，但不能在iframe中使用吗？

问题是违反了CSP（内容安全策略），script-src 'unsafe-inline'必须启用该状态。除非我没有定义CSP，即使我定义了一个CSP并允许script-src 'unsafe-inline'它仍然给出相同的违规错误。在ie11 / chrome / ff中得到相同的结果。

iframe位于同一域（位于同一目录中）。

1. 在控制台中定位iframe并在控制台中使用window.location.replace('/samepage.html#onpage_anchor')。
2. 有用。 它以页面锚为目标，而无需重新加载页面，也没有历史记录。
3. 将相同的代码内联在锚链接上，它可以工作。
4. 在外部脚本中使用相同的代码，获取csp违规错误。 如果不在iframe中，则效果很好。

我试图创建一个CSP允许的动作，但即使是在最宽松的内容安全策略可能会允许它。

编辑：所以我把示例放到允许多个文件的插件上，这样我就可以使用引用父/子页面的正确hrefs。

有关示例的示例的注释：

1. 这些示例中未重现该问题。 该脚本即使在iframe中也可以完美运行。但是，相同的代码在我的本地服务器上不起作用，或者当我在VPS上实时运行该代码时。

2. 我怀疑在plunker上不会触发CSP违规，因为plunker通过某种抽象层将内容呈现给浏览器。

3. 第一次单击父级中的手风琴链接时，它会刷新。这是因为页面最初加载的方式没有引用index.html。后续点击将按预期工作，而无需重新加载页面。在iframe中这不是问题，因为它最初会引用child.html

4. 这些是显示代码而无需进行任何更改即可使其工作的很好的示例（如需要更改href使其在stackoverflow代码段中工作，如下所述）。这也很好，因为它显示了javascript应该可以正常工作。但这并没有显示出实际的问题。您仍然需要在编辑器中加载它，然后在本地服务器或实时托管环境中运行它，才能看到真正的问题。

柱塞示例

有脚本： 无历史记录
无脚本： 有历史记录

简化的代码示例

一键输入的简单手风琴。足以重现问题。

单击打开/关闭将展开/折叠手风琴，不需要JS。JS应该做完全相同的事情，但是没有历史记录。工作正常，但不能在iframe中使用。

代码段注释：

1. 您可以运行该代码段以了解我所描述的内容，但实际上并不能证明问题所在。

2. 该代码段的行为与实际浏览器中的行为不同，JavaScript无法正常工作。

3. 该代码段显示了代码，但应在iframe中运行以查看问题。在iframe外部运行它，以查看差异以及其工作原理。

4. 由于链接如何与JS配合使用（替换整个url），因此它们实际上必须像这样， …

我正在使用 NextJS (v.13.4.15) 应用程序目录

我正在使用反应本机 webview 在移动应用程序内显示网站，因此后退按钮对于导航至关重要（我无法访问浏览器的后退按钮）

我想要类似的东西

'use client' 作为客户端组件：

    <button
      onClick={() => window.history.state && window.history.state.idx > 0 ? router.back() : router.push('/')}
    >

但是我无法让它工作，NextJS 似乎在访问 window.history 时遇到问题（或者可能不是 NextJS，这只是一个隐私问题）

即使我可以访问该窗口，该窗口对象也包含令人困惑且不一致的子属性和值，如下所示：

{
    "__NA": true,
    "tree": [
        "",
        {
            "children": [
                "courses",
                {
                    "children": [
                        [
                            "slug",
                            "hacking-success",
                            "c"
                        ],
                        {
                            "children": [
                                "__PAGE__",
                                {}
                            ]
                        }
                    ]
                }
            ]
        },
        null,
        null,
        true
    ]
}

必须有一种方法来检查 (router.back()) 是否为空或无法返回，然后检查 router.push('/) 对吗？

理想情况下：

router.back() ?? router.push('/')

或者有人可以帮助解释这个history.state.idx.tree？长度似乎与导航中历史记录项目的数量不匹配，而是与 URL 的父级/层次结构匹配

我希望 NextJS 在路由器上有一个方法，可以返回历史记录，或者在历史记录为空时提供 null/false …