window.location.href更改时的事件

82

我正在为某个网站编写Greasemonkey脚本，该脚本有时会进行修改location.href。

在页面上进行更改时，如何获得事件（通过window.addEventListener或类似方式）window.location.href？我还需要访问指向新的/修改的URL的文档的DOM。

我已经看到了其他涉及超时和轮询的解决方案，但是如果可能的话，我想避免这种情况。

javascript  dom  greasemonkey  dom-events 
— 约翰·达林
source
— user202729

Answers:

86

popstate事件：

当活动历史记录条目更改时，将触发popstate事件。[...] popstate事件仅通过执行浏览器操作（例如单击后退按钮（或在JavaScript中调用history.back（）））来触发

因此，在使用时侦听popstate事件并发送popstate事件history.pushState()应该足以对href更改采取措施：

window.addEventListener('popstate', listener);

const pushUrl = (href) => {
  history.pushState({}, '', href);
  window.dispatchEvent(new Event('popstate'));
};
— 高频
source
2
但是popstate在加载内容之前会触发吗？
— user2782001
4
如果无法控制这段代码，则无法使用pushState
— Nathan Gouy
2
这并不总是有效，它依赖于要触发的popstate事件。例如内浏览YouTube也不会触发，只有当你按下后退或前进的历史
— TrySpace
52

我在扩展程序“ Grab Any Media”中使用了此脚本，并且工作正常（如youtube case）

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);

};
— 莱昂纳多·恰乔
source
不知何故，我喜欢这种方法...有点RxJs的感觉:)
— Guntram
可能适用于youtube的唯一解决方案：[仅报告]拒绝从youtube.com/sw.js创建工作程序，因为它违反了以下内容安全政策指令：“ worker-src'none'”。
— 西蒙·穆瑟
MutationObserver
1
开箱即用，我的用例没有任何麻烦，上帝保佑！令人讨厌的是，目前还没有任何本地事件（popstate不适用于我），但是有一天！我会用window.addEventListener("load", () => {})window.onload代替:)
— Sanchit Batra
这项工作，即使在扩展上下文中也可以检测到history.pushState
— YangombiUmpakati
29

您无法避免轮询，没有任何事件可更改href。

无论如何，使用间隔是很轻的。如果您担心的话，每隔50ms左右检查一次href对性能不会有任何重大影响。

— 塔图·乌尔曼嫩（Tatu Ulmanen）
source
3
@AlexanderMills：幸运的是popstate和有这些新的解决方案hashchange。
— serv-inc
这不是真的。
— inf3rno
@MartinZvarík即使在2010年，也可以使用unload事件以及微任务或宏任务来加载新文档。
— inf3rno
3
不幸的是，这个答案在2020年仍然是正确的。popstate仅在用户使用前进/后退按钮时触发，而hashchange仅在哈希更改时触发。除非您能控制引起位置更改的代码，否则必须轮询🤷‍♀️
— Rico Kahler
12

onhashchange您可以使用 默认事件。

此处记录

可以这样使用：

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;
    } );
} () );
— iSkore
source
8
仅当您的URL的部分以“＃”符号开头（通常用于锚链接）时，才会发送Hashchange事件。否则它将不会触发。
— Fredrik_Macrobond
1
window.addEventListener（“ hashchange”，funcRef，false）;
— 比绍伊·汉娜
7

您之前尝试过卸载吗？该事件在页面响应导航请求之前立即触发，其中应包括对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>

但是请注意，无论是由于脚本还是有人单击链接，只要您离开页面导航，您的事件都会触发。您真正的挑战是检测引发事件的不同原因。（如果这对您的逻辑很重要）

— 贝鲁加布
source
我不确定这是否行得通，因为通常哈希更改不涉及页面重新加载。
— samandmoore，2010年
我也需要访问新的DOM，因此我更新了问题以澄清这一点。
— 约翰·达林
好的-没有考虑这种hash情况-会考虑的。至于能够访问新的DOM，那么您就很不走运（就从事件处理程序访问而言），因为该事件将在加载新的DOM之前触发。您也许可以将逻辑合并到新页面的onload事件中，但是在识别是否需要对该页面的每次加载执行逻辑时，您可能会遇到相同的问题。您能否提供有关您要实现的目标的更多详细信息，包括页面流？
— belugabob 2010年
我只是尝试访问onbeforeunload事件处理程序内的location.href，它显示的是原始网址，而不是目标网址。
— CMCDragonkai '17
Beforeunload可以取消页面的卸载，因此，如果您不想取消导航，则最好使用unload事件。
— inf3rno
2

那么有2种方式可以改变location.href。您可以编写location.href = "y.html"，从而重新加载页面，或者可以使用不重新加载页面的历史记录API。我最近尝试了很多。

如果打开子窗口并从父窗口捕获子页面的负载，则不同的浏览器的行为会大不相同。唯一常见的是，它们删除了旧文档并添加了一个新文档，因此，例如，将readystatechange或load事件处理程序添加到旧文档中没有任何作用。大多数浏览器也会从window对象中删除事件处理程序，唯一的例外是Firefox。在使用KarmaRunner的Chrome浏览器和Firefox中，如果您使用unload + next tick。因此，您可以添加例如加载事件处理程序或readystatechange事件处理程序，或者仅记录浏览器正在使用新URI加载页面。在具有手动测试功能的Chrome中（可能也是GreaseMonkey），在Opera，PhantomJS，IE10和IE11中，您无法在加载状态下捕获新文档。在这些浏览器中，unload + next tick调用比页面加载事件晚几百毫秒。延迟通常为100到300毫秒，但是歌剧simetime对于下一个滴答声会延迟750毫秒，这很可怕。因此，如果要在所有浏览器中获得一致的结果，则可以在load事件之后执行所需的操作，但是不能保证在此之前不会覆盖该位置。

var uuid = "win." + Math.random();
var timeOrigin = new Date();
var win = window.open("about:blank", uuid, "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes");


var callBacks = [];
var uglyHax = function (){
    var done = function (){
        uglyHax();
        callBacks.forEach(function (cb){
            cb();
        });
    };
    win.addEventListener("unload", function unloadListener(){
        win.removeEventListener("unload", unloadListener); // Firefox remembers, other browsers don't
        setTimeout(function (){
            // IE10, IE11, Opera, PhantomJS, Chrome has a complete new document at this point
            // Chrome on Karma, Firefox has a loading new document at this point
            win.document.readyState; // IE10 and IE11 sometimes fails if I don't access it twice, idk. how or why
            if (win.document.readyState === "complete")
                done();
            else
                win.addEventListener("load", function (){
                    setTimeout(done, 0);
                });
        }, 0);
    });
};
uglyHax();


callBacks.push(function (){
    console.log("cb", win.location.href, win.document.readyState);
    if (win.location.href !== "http://localhost:4444/y.html")
        win.location.href = "http://localhost:4444/y.html";
    else
        console.log("done");
});
win.location.href = "http://localhost:4444/x.html";

如果仅在Firefox中运行脚本，则可以使用简化版本并以加载状态捕获文档，例如，在记录URI更改之前，已加载页面上的脚本无法导航：

var uuid = "win." + Math.random();
var timeOrigin = new Date();
var win = window.open("about:blank", uuid, "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes");


var callBacks = [];
win.addEventListener("unload", function unloadListener(){
    setTimeout(function (){
        callBacks.forEach(function (cb){
            cb();
        });
    }, 0);
});


callBacks.push(function (){
    console.log("cb", win.location.href, win.document.readyState);
    // be aware that the page is in loading readyState, 
    // so if you rewrite the location here, the actual page will be never loaded, just the new one
    if (win.location.href !== "http://localhost:4444/y.html")
        win.location.href = "http://localhost:4444/y.html";
    else
        console.log("done");
});
win.location.href = "http://localhost:4444/x.html";

如果我们正在谈论更改URI的哈希部分或使用历史记录API的单页应用程序，则可以分别使用窗口的hashchange和popstate事件。即使您在历史记录中来回移动，直到您停留在同一页面上，它们也可以捕获。那些文档不会更改，页面也不会真正重新加载。

— inf3rno
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.