如何使用onpopstate和普通JavaScript

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

我的ajax部分（HTTPrequest）工作正常，pushstate正在工作

很明显，我现在想要的是popstate函数工作。 我已经阅读并观看了教程，但如何使用这个关键字呢

我添加了一个fiddle，所以你可以看到我的代码，它在fiddle中工作不好，但在chrome、firefox和后期ie中工作得非常好。 对于我的国家，我有这样的想法

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

onpopstate代码是什么样子的？ 我知道索取所有的代码是不好的，但通过这种方式我实际上学会了，因为当我阅读代码时，我理解了它。我还没有完全掌握javascript事件处理，正如您所看到的，我在html文档中使用onclick，而不是事件处理。 但我知道，我可以做到，这只是我的文档中的大量更改，对我来说，首要的任务是让后退/前进、刷新和共享功能正常工作，这样我就可以在web上实际共享我的网站，而不需要也不需要任何功能！）

---

非常感谢您的帮助，提前感谢：）

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

---

我使用ajax的方式与您的建议类似。我利用了

history.pushState（）

state对象。history对象不允许访问历史会话URL（这是一个合理的安全风险）。我通过将请求的URL存储在state对象中来模拟这种效果

我已经在JSFIDLE上查看了您的示例，并将使用它作为参考

我建议在

函数垫（url）

中使用

history.pushState

时，向state对象添加

url

参数，如下所示

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

最好记住，当使用

pushState

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

提供状态对象后，

事件.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

事件。当这种情况发生时，

函数Mat（url）

将传递存储在

状态

属性中的url，并使用该url发送ajax请求

---

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

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

---

是的，我已经读过了，但是那里的ajax示例包含json，正如我理解或误解的那样，我只是缺少onpopstate事件处理程序。现在，当我从index.php导航到someOtherPage.php，然后使用ajax打开一个菜单项，比如someOtherPage.php/ajaxPage，当我导航到someotherhtmlagentwithajax.php，然后返回someOtherPage.php时，它将显示加载的ajax内容，就像someOtherPage.php/ajaxPage一样，但再次单击，不会更改任何内容，应通过第二次单击backbutton将其更改为someOtherPage.php，此外，如果我刷新someOtherPage.php/ajaxPage，则页面将不带样式加载。我理解这是因为我缺少onpopstate事件处理程序。我不完全理解的是，当我有3个不同的html页面时，如何使用onpopstate，在所有页面中使用ajax。以及正确设置onpopstate函数。我知道，需要对事件处理进行更多的研究，但找不到我需要的教程，很多教程都是用jQuery显示的，我没有使用。history.js是jQuery，不是吗？将查找它；）非常有用，这一定是我要找的，我会试试看！感谢您提供了一个解释得很好的答案，以及一个可供选择的添加url的wat。我认为，将url作为第三个参数最适合我，因为我希望我的页面有不同的url。否则我只有4个不同的url，对吗？对于共享页面和前后导航，使用不同的url似乎更符合逻辑，这样人们可以直接导航到页面，如果他们将其添加到书签中，或者与朋友共享。然后我可以研究更改标题，并且og:titles:）我会玩一玩：）谢谢！我从您的代码中了解了使用onpopstate的方法。不过，除了弄乱我的页面之外，它没有任何效果：/正如我试图指定的那样，我需要能够来回导航，加载正确的页面，即somehtmlpage/someajaxpage.php，当转到另一个htmlpage，并返回到somehtmlpage/someajaxpage.php时，应该加载ajaxpage，而不仅仅是html页面。因此，我需要唯一的url/href，这对用户来说也更合适。我还需要能够刷新页面，并使用样式加载ajaxpage。也许我应该使用jQuery。在firefox中，它现在将转到html页面，而忽略ajax。在chrome中，它将加载ajax而不进行样式设置。如果你想看得更清楚，请访问www.sunto.no/english。顶部菜单是html，除了环境部分，它是嵌入的另一个页面。