Question

我的网站有4个主要页面，索引，somepage，someotherPage和LastOtherpage。它们有不同的名称，如index.php，food_and_health.php，enlightening_info.php和about_us.php。

我的ajax部分（HTTPrequest）运行正常，而pushstate正在运行。

我现在想要的，显然是popstate函数正常工作。我已阅读并观看了教程，但我如何使用this关键字进行此操作？

我添加了一个小提琴，所以你可以看到我的代码，它在小提琴中效果不佳，但在chrome，firefox和后期工作方面非常好。我的onpopstate有这样的想法..

nav.history("this.object", "Title", "/this.url"); 
http://jsfiddle.net/vwd6bnjc/1/

onpopstate代码怎么样？我知道要求所有代码是不好的，但这样我实际上学习，就像我读代码时一样，我理解它。我还没有完全掌握javascript事件处理，因为你可以看到我在我的html文档中使用onclick，而不是事件处理它们。但是我知道，我能做到这一点，我的文档中有很多变化，对我来说是首要任务，就是让后退/前进，刷新和共享功能起作用，这样我才能真正分享我的网站在网络上，没有和缺乏功能！：）

非常感谢任何帮助，在此先感谢：）

Answer 1

我以类似的方式使用ajax你的建议。我利用了history.pushState()状态对象。历史对象不允许访问历史会话URL（它有合理的安全风险）。我通过将请求的URL存储在状态对象中来模拟效果。

我在jsfiddle上查看过您的示例，并将其用作参考。

我建议您在history.pushState中使用function Mat(url)将url参数添加到状态对象中。

history.pushState({urlRequested:url}, 'Page Title');

值得记住的是，使用pushState方法并为第三个参数提供URL时，也会导致浏览器URL地址发生变化。因此，如果您刷新页面，则会请求更新的URL。您如何处理这个取决于您，但通过排除它将使用当前文档位置。因此，如果刷新页面，请求的页面将是相同的。

提供状态对象后，event.state属性将具有可用于获取URL的对象[urlRequested:url]。

要做到这一点，你可能会这样做。

window.addEventListener("popstate", function(event) {
    if (event.state !== null) {
        /**
         * Here you can code what operations you want to accomplish
         * when the event is called. If you would like you can use
         * your function Mat( url )
         */
        Mat(event.state['urlRequested']);
        //this gets the value of urlRequested which is the URL
    }
}, true);

当用户在两个历史记录条目之间导航时，会触发onpopstate事件。当发生这种情况时，function Mat( url )将传递state属性中存储的网址，并使用该网址发送ajax请求。

我当然希望这有助于回答你的问题。

Answer 2

如果MDN没有帮助您，您可以查看history.js并将其用于跨浏览器，或者查看如何使用onPopState：

https://github.com/browserstate/history.js

Answer 3

MDN的示例对您有帮助吗？你有机会看一下吗？

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate

如何使用onpopstate，使用纯JavaScript

3 个答案: