用户脚本仅适用于后端提供的页面,但不适用于 SPA 方式的前端

san*_*oko 5 javascript ajax console userscripts single-page-application

我在 Greasemonkey/Tampermonkey 上运行以下用户脚本。

我运行它,facebook.com它在引导过程中从后端提供一些网页,而在前端则通过 HRO 动态提供其他一些网页,就像单页应用程序 (SPA) 一样。

// ==UserScript==
// @name        facebook
// @namespace   nms
// @include     http://*.facebook.com/*
// @include     https://*.facebook.com/*
// @version     1
// @grant       none
// ==/UserScript==

setTimeout( () => {
    // generalStuff:
        document.querySelectorAll(' #left_nav_section_nodes, .fbChatSidebar ').forEach( (e)=> {
            e.style.visibility = "hidden";
        });

}, 1000);
Run Code Online (Sandbox Code Playgroud)

如果我在控制台上运行此脚本,即使在基于 HRO 的网页中,它也可以正常运行,但是当从 Greasemoneky/Tampermonkey 运行时,它不会在这些特定网页中运行。

我怎样才能使脚本在类似 SPA 的网页上也能正常工作?

san*_*oko 6

在这种情况下,当setTimeoutsetInterval和 事件委托本身不起作用时,可以将实现它们的状态推送到内存中,然后用它替换现有状态,从而使网页的 DOM 内容发生变化。

下面的代码用于替换使用 AJAX 加载的数据,而不是直接从 PHP 加载的数据:

let utilityFunc = ()=> {
    var run = (url)=> {
       // insert your code here
    };

    var pS = window.history.pushState;
    var rS = window.history.replaceState;

    window.history.pushState = function(a, b, url) {
        run(url);
        pS.apply(this, arguments);
    };

    window.history.replaceState = function(a, b, url) {
        run(url);
        rS.apply(this, arguments);
    };

utilityFunc();
Run Code Online (Sandbox Code Playgroud)

这就是我从这里读到的理解。