window.location.href改变时的事件

我正在写一个网站的Greasemonkey脚本,在某些时候修改location.href

window.location.href在页面上发生变化时,如何获得一个事件(通过window.addEventListener或类似的东西)? 我也需要访问指向新的/修改后的url的文档的DOM。

我见过其他解决scheme,涉及超时和轮询,但我想避免,如果可能的话。

popstate事件 :

活动历史logging条目更改时,会触发popstate事件。 […] popstate事件只能通过浏览器的操作来触发,比如点击后退button(或者在JavaScript中调用history.back())。

因此,在使用history.pushState()时,监听popstate事件并发送popstate事件应该足以对href更改采取行动:

 window.addEventListener('popstate', listener); const pushUrl = (href) => { history.pushState({}, '', href); window.dispatchEvent(new Event('popstate')); }; 

你不能避免轮询,没有任何事件的变化。

如果你不过分的话,使用间隔是相当轻的。 如果你担心这个问题,每隔50ms检查一次href就不会对性能产生任何显着的影响。

你有没有尝试beforeUnload? 这个事件在页面响应导航请求之前立即触发,这应该包括修改href。

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <HTML> <HEAD> <TITLE></TITLE> <META NAME="Generator" CONTENT="TextPad 4.6"> <META NAME="Author" CONTENT="?"> <META NAME="Keywords" CONTENT="?"> <META NAME="Description" CONTENT="?"> </HEAD> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $(window).unload( function(event) { alert("navigating"); } ); $("#theButton").click( function(event){ alert("Starting navigation"); window.location.href = "http://www.bbc.co.uk"; } ); }); </script> <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000" ALINK="#FF00FF" BACKGROUND="?"> <button id="theButton">Click to navigate</button> <a href="http://www.google.co.uk"> Google</a> </BODY> </HTML> 

但是,要小心,无论您何时离开页面,您的事件都会触发,无论是由于脚本还是某人点击链接。 你真正的挑战是检测事件被解雇的不同原因。 (如果这对你的逻辑很重要)

有一个可以使用的默认onhashchange事件。

logging在这里

可以这样使用:

 function locationHashChanged( e ) { console.log( location.hash ); console.log( e.oldURL, e.newURL ); if ( location.hash === "#pageX" ) { pageX(); } } window.onhashchange = locationHashChanged; 

如果浏览器不支持oldURLnewURL你可以像这样绑定它:

 //let this snippet run before your hashChange event binding code if( !window.HashChangeEvent )( function() { let lastURL = document.URL; window.addEventListener( "hashchange", function( event ) { Object.defineProperty( event, "oldURL", { enumerable: true, configurable: true, value: lastURL } ); Object.defineProperty( event, "newURL", { enumerable: true, configurable: true, value: document.URL } ); lastURL = document.URL; } ); } () ); 

我使用这个脚本在我的扩展名“抓取任何媒体”和工作正常( 如youtube的情况下

 var oldHref = document.location.href; window.onload = function() { var bodyList = document.querySelector("body") ,observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (oldHref != document.location.href) { oldHref = document.location.href; /* Changed ! your code here */ } }); }); var config = { childList: true, subtree: true }; observer.observe(bodyList, config); };