Question

我使用jquery ajax实现分页但是操纵浏览器的历史...并且到目前为止工作正常但我几小时前意识到如果我在页面的任何部分都有链接

<a href="#">My link</a>

点击此链接，调用函数window.onpopstate，但我不知道原因，这种情况发生在我网站的所有A HREF上。

这是我的功能，检测调用特定功能的当前状态，并按国家/地区或搜索字词或指定网址的参数加载数据。

window.onpopstate = function(event) {
    console.log(event);
    var section = $('#wrapper section').attr('id');

    if(event && event.state) {


        //State for Reviews pagination ?page=x
        if (event.state.type == 'pagination') {
            popStateShopPage(event.state);
        }

        //State for Reviews pagination by country ?country=MX&page=x
        if (event.state.type == 'country') {
            popStateShopPageCountry(event.state);
        }

        //State for Reviews pagination by search ?search=hello&page=x
        if (event.state.type == 'search') {
            popStateShopPageSearch(event.state);
        }

    } else {

        if (section == 'shop-page') {
            popStateShopPage(1);
        }

        history.pushState(null);
    }
}

我正在使用这些功能来推动状态

history.pushState({type: 'pagination', page: number_page}, "", "?page="+number_page);
history.pushState({type: 'country', page: number_page, country: country}, "", "?country="+country+"&page="+number_page);
history.pushState({type: 'search', page: number_page, term: term}, "", "?search="+term+"&page="+number_page);

Answer 1

正如MSDN Mozilla Network中所述：

1.当活动历史记录条目更改时，将触发popstate事件。如果   正在激活的历史记录条目是通过调用创建的   history.pushState（）或受到调用的影响   history.replaceState（），popstate事件的state属性包含一个   历史条目的状态对象的副本。

2.注意只调用history.pushState（）或history.replaceState（）   不会触发popstate事件。仅触发popstate事件   通过执行浏览器操作，例如单击后退按钮（或   在JavaScript中调用history.back（）。

window.onpopstate触发的原因是，首先，当您点击锚标记时，历史记录已被更改;第二，你正在做一个浏览器动作。

在我看来，没有任何办法可以避免这种情况，正如JavaScritp The Definitive Guide中所述：

某些事件会导致相关的默认操作被执行网页浏览器。例如，当标记上发生单击事件时，浏览器的默认操作是遵循超链接。默认操作像这些只在事件的所有三个阶段之后执行传播完成，以及在事件期间调用的任何处理程序传播有机会阻止默认操作通过调用Event对象的preventDefault（）方法发生。

这三个阶段是：捕获，定位和冒泡。

希望它有用！

Window.onpopstate它已被所有href链接激活

1 个答案: