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;
如果浏览器不支持oldURL和newURL你可以像这样绑定它：
//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); };
