因此,既然HTML5引入history.pushState
了更改浏览器历史记录的方法,那么网站开始将其与Ajax结合使用,而不是更改URL的片段标识符。
可悲的是,这意味着这些呼叫无法再由来检测onhashchange
。
我的问题是:是否有可靠的方法(黑客?;))来检测网站何时使用history.pushState
?该规范未声明有关引发的事件的任何信息(至少我找不到任何东西)。
我尝试创建一个Facade,并window.history
用我自己的JavaScript对象替换了它,但是它根本没有任何效果。
进一步的说明:我正在开发一个Firefox插件,需要检测这些更改并采取相应措施。
我知道几天前有一个类似的问题,它询问听某些DOM事件是否有效,但我宁愿不依赖于此,因为可以出于许多不同的原因生成这些事件。
更新:
这是一个jsfiddle(使用Firefox 4或Chrome 8),显示onpopstate
在pushState
调用时不会触发(或者我做错了吗?可以随时进行改进!)。
更新2:
另一个(侧面)问题是window.location
使用时未更新pushState
(但是我认为我已经在此处阅读过此信息)。
5.5.9.1事件定义
该popstate导航到会话历史记录条目时,事件在某些情况下被解雇。
据此,当您使用时,没有理由触发popstate pushState
。但是这样的事件pushstate
会派上用场。因为history
是宿主对象,所以您应该小心使用它,但是在这种情况下,Firefox看起来不错。这段代码可以正常工作:
(function(history){
var pushState = history.pushState;
history.pushState = function(state) {
if (typeof history.onpushstate == "function") {
history.onpushstate({state: state});
}
// ... whatever else you want to do
// maybe call onhashchange e.handler
return pushState.apply(history, arguments);
};
})(window.history);
您的jsfiddle变为:
window.onpopstate = history.onpushstate = function(e) { ... }
您可以window.history.replaceState
用相同的方式进行猴子补丁。
注意:当然,您可以onpushstate
简单地将其添加到全局对象,甚至可以通过以下方式使它处理更多事件:add/removeListener
我曾经用这个:
var _wr = function(type) {
var orig = history[type];
return function() {
var rv = orig.apply(this, arguments);
var e = new Event(type);
e.arguments = arguments;
window.dispatchEvent(e);
return rv;
};
};
history.pushState = _wr('pushState'), history.replaceState = _wr('replaceState');
window.addEventListener('replaceState', function(e) {
console.warn('THEY DID IT AGAIN!');
});
这几乎和galambalazs一样。
不过,这通常是过大的。而且它可能不适用于所有浏览器。(我只关心浏览器的版本。)
(并且它留下了一个var _wr
,所以您可能要包装它或其他东西。我不在乎。)
终于找到了做到这一点的“正确”方法!它需要为您的扩展程序添加特权并使用后台页面(不仅是内容脚本),但它确实可以工作。
您想要的事件是browser.webNavigation.onHistoryStateUpdated
,当页面使用history
API更改URL时将触发该事件。它仅针对您有权访问的网站触发,并且您还可以根据需要使用URL过滤器进一步减少垃圾邮件。它需要webNavigation
许可(当然是相关域的主机许可)。
事件回调获取选项卡ID,“导航”到的URL以及其他此类详细信息。如果事件触发时您需要在该页面上的内容脚本中执行操作,请直接从后台页面注入相关脚本,或者port
在加载内容脚本时将其打开到后台页面,保存背景页面该事件通过选项卡ID索引到集合中的端口,并在事件触发时通过相关端口(从后台脚本到内容脚本)发送一条消息。
您可以绑定window.onpopstate
事件吗?
https://developer.mozilla.org/en/DOM%3awindow.onpopstate
从文档:
窗口上popstate事件的事件处理程序。
每当活动历史记录条目更改时,都会将popstate事件调度到窗口。如果要激活的历史记录条目是通过调用history.pushState()创建的,或者受调用history.replaceState()的影响,则popstate事件的state属性包含历史记录条目的状态对象的副本。
由于您正在询问Firefox插件,因此这是我必须使用的代码。使用unsafeWindow
是不再推荐,并出现了错误的时候pushState的是被修改后,客户端脚本调用:
拒绝访问属性history.pushState的权限
而是有一个名为exportFunction的API ,它允许将函数注入window.history
如下:
var pushState = history.pushState;
function pushStateHack (state) {
if (typeof history.onpushstate == "function") {
history.onpushstate({state: state});
}
return pushState.apply(history, arguments);
}
history.onpushstate = function(state) {
// callback here
}
exportFunction(pushStateHack, unsafeWindow.history, {defineAs: 'pushState', allowCallbacks: true});
除了其他答案。代替存储原始功能,我们可以使用历史记录界面。
history.pushState = function()
{
// ...
History.prototype.pushState.apply(history, arguments);
}
galambalazs的回答是猴子补丁window.history.pushState
和window.history.replaceState
,但由于某种原因,它对我停止了工作。这是一个不太好的选择,因为它使用轮询:
(function() {
var previousState = window.history.state;
setInterval(function() {
if (previousState !== window.history.state) {
previousState = window.history.state;
myCallback();
}
}, 100);
})();
我认为该主题需要更现代的解决方案。
我确定那nsIWebProgressListener
是过去,然后我很惊讶没有人提到它。
从框架脚本(为了实现e10s兼容性):
let webProgress = docShell.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIWebProgress);
webProgress.addProgressListener(this, Ci.nsIWebProgress.NOTIFY_STATE_WINDOW | Ci.nsIWebProgress.NOTIFY_LOCATION);
然后听 onLoacationChange
onLocationChange: function onLocationChange(webProgress, request, locationURI, flags) {
if (flags & Ci.nsIWebProgressListener.LOCATION_CHANGE_SAME_DOCUMENT
显然,这将涵盖所有pushState。但是有一条警告警告它“ ALSO触发pushState”。因此,我们需要在此处进行更多过滤,以确保它只是pushstate的东西。
基于:https : //github.com/jgraham/gecko/blob/55d8d9aa7311386ee2dabfccb481684c8920a527/toolkit/modules/addons/WebNavigation.jsm#L18
并且:resource://gre/modules/WebNavigationContent.js
好吧,我看到了很多替换的pushState
属性的示例,history
但我不确定这是一个好主意,我更愿意创建一个与历史类似的API基于服务事件,这样您不仅可以控制推送状态,还可以控制替换状态同样,它为不依赖于全局历史API的许多其他实现打开了大门。请检查以下示例:
function HistoryAPI(history) {
EventEmitter.call(this);
this.history = history;
}
HistoryAPI.prototype = utils.inherits(EventEmitter.prototype);
const prototype = {
pushState: function(state, title, pathname){
this.emit('pushstate', state, title, pathname);
this.history.pushState(state, title, pathname);
},
replaceState: function(state, title, pathname){
this.emit('replacestate', state, title, pathname);
this.history.replaceState(state, title, pathname);
}
};
Object.keys(prototype).forEach(key => {
HistoryAPI.prototype = prototype[key];
});
如果需要EventEmitter
定义,则上面的代码基于NodeJS事件发射器:https : //github.com/nodejs/node/blob/36732084db9d0ff59b6ce31e839450cd91a156be/lib/events.js。utils.inherits
可以在这里找到实现:https : //github.com/nodejs/node/blob/36732084db9d0ff59b6ce31e839450cd91a156be/lib/util.js#L970
我宁愿不覆盖本机历史记录方法,因此此简单的实现将创建我自己的名为eventedPush状态的函数,该函数仅调度一个事件并返回history.pushState()。两种方法都可以正常工作,但是我发现此实现更加简洁,因为本机方法将继续按照未来开发人员的期望执行。
function eventedPushState(state, title, url) {
var pushChangeEvent = new CustomEvent("onpushstate", {
detail: {
state,
title,
url
}
});
document.dispatchEvent(pushChangeEvent);
return history.pushState(state, title, url);
}
document.addEventListener(
"onpushstate",
function(event) {
console.log(event.detail);
},
false
);
eventedPushState({}, "", "new-slug");
基于@gblazex给出的解决方案,如果您想采用相同的方法,但是使用箭头函数,请在javascript逻辑中继续以下示例:
private _currentPath:string;
((history) => {
//tracks "forward" navigation event
var pushState = history.pushState;
history.pushState =(state, key, path) => {
this._notifyNewUrl(path);
return pushState.apply(history,[state,key,path]);
};
})(window.history);
//tracks "back" navigation event
window.addEventListener('popstate', (e)=> {
this._onUrlChange();
});
然后,实现另一个功能_notifyUrl(url)
,该功能将在更新当前页面url时触发您可能需要执行的所有必要操作(即使该页面根本没有加载)
private _notifyNewUrl (key:string = window.location.pathname): void {
this._path=key;
// trigger whatever you need to do on url changes
console.debug(`current query: ${this._path}`);
}
由于我只想要新的URL,因此我改编了@gblazex和@Alberto S.的代码以获取此信息:
(function(history){
var pushState = history.pushState;
history.pushState = function(state, key, path) {
if (typeof history.onpushstate == "function") {
history.onpushstate({state: state, path: path})
}
pushState.apply(history, arguments)
}
window.onpopstate = history.onpushstate = function(e) {
console.log(e.path)
}
})(window.history);
我认为即使可以修改本地函数也不是一个好主意,并且应该始终保持应用程序范围,所以一个好的方法是不使用全局pushState函数,而是使用自己的函数:
function historyEventHandler(state){
// your stuff here
}
window.onpopstate = history.onpushstate = historyEventHandler
function pushHistory(...args){
history.pushState(...args)
historyEventHandler(...args)
}
<button onclick="pushHistory(...)">Go to happy place</button>
请注意,如果任何其他代码使用本机pushState函数,则不会获得事件触发器(但是,如果发生这种情况,则应检查代码)
作为标准状态:
请注意,仅调用history.pushState()或history.replaceState()不会触发popstate事件。仅通过执行浏览器操作(例如单击“后退”按钮(或在JavaScript中调用history.back()))才能触发popstate事件。
我们需要调用history.back()来触发WindowEventHandlers.onpopstate
因此:
history.pushState(...)
做:
history.pushState(...)
history.pushState(...)
history.back()
文章标签:browser-history , firefox-addon , javascript , pushstate
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!