我可以阻止history.popstate在初始页面加载时触发吗?
我正在开发一个通过AJAX提供内容的网站。
如果单击菜单中的某个项目,内容div将使用$.get
响应进行更新,没什么特别的。
我正在实现history.pushState
以允许使用浏览器的后退/前进按钮进行导航。
我有以下内容在历史导航中加载内容:
$(function() { $(window).bind("popstate", function() { $.getScript(location.href); }); });
问题是,当第一次加载页面时,此函数执行$.getScript
以便再次立即加载页面。 第一次加载页面时,它会呈现初始HTML视图,然后在第二次加载时呈现JS视图,因为它是一个JS请求。
如何防止此事件在具有HTML请求的页面上触发?
使用原生HTML5历史API会遇到一些问题,每个HTML5浏览器都会稍微处理不同的API,因此您不能只编写一次代码并期望它能够在不实施变通方法的情况下工作。 History.js为HTML5 History API提供跨浏览器API,并为HTML4浏览器提供可选的hashchange
回退,如果您想沿着该路线前进的话。
要将您的网站升级为RIA / Ajax-Application,您可以使用以下代码段: https : //github.com/browserstate/ajaxify
这是关于hashbang,哈希和html5历史API的更长篇文章智能状态处理的一部分。
如果您需要任何进一步的帮助,请告诉我:)干杯。
你需要得到event.originalEvent
// Somewhere in your previous code if (history && history.pushState) { history.pushState({module:"leave"}, document.title, this.href); } $(window).bind("popstate", function(evt) { var state = evt.originalEvent.state; if (state && state.module === "leave") { $.getScript(location.href); } });
在页面加载时触发popstate事件时,它不会在事件对象中具有state属性。 这允许您检查是否针对页面加载触发了事件。
window.onpopstate = function (event) { if (event.state) { // do your thing } else { // triggered by a page load } }
当浏览器首次加载时,它总是触发一个popstate事件。 所以你需要确定这个popstate是否是你的。
执行pushState时,请确保您有一个状态对象。 那样你以后可以查看。
然后在popstate处理程序上,检查状态对象:)
$(function() { $(window).bind("popstate", function(data) { if (data.state.isMine) $.getScript(location.href); }); }); // then add the state object history.pushState({isMine:true},title,url);
如果您需要更多帮助,请告诉我:)
我用它来改变条形地址并保存当前状态,包括当前的html体,然后我重新加载它在后面的bouton点击而没有任何其他的ajax调用。 全部保存在您的浏览器中:
-
$(document).ajaxComplete(function(ev, jqXHR, settings) { var stateObj = { url: settings.url, innerhtml: document.body.innerHTML }; window.history.pushState(stateObj, settings.url, settings.url); }); window.onpopstate = function (event) { var currentState = history.state; document.body.innerHTML = currentState.innerhtml; };