【问题标题】:Userscript works only on pages served from backend, but not on frontend in a SPA wayUserscript 仅适用于从后端提供的页面,但不适用于 SPA 方式的前端
【发布时间】:2017-08-01 00:09:13
【问题描述】:

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

我在 facebook.com 上运行它,它通过 HRO 为后端的一些网页提供引导服务,以及在前端通过 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);

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

如何使脚本在类似 SPA 的网页上也能正常工作?

【问题讨论】:

    标签: javascript ajax console single-page-application userscripts


    【解决方案1】:

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

    这是用于替换直接从 PHP 加载的 AJAX 数据的代码:

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

    这就是我阅读here时所理解的。

    【讨论】:

    • 您可能还想做的事情是让您的 run 函数返回一个清理函数,您可以在自定义 push/replaceState 中调用它,这样您就不会同时运行多个 setIntervals
    猜你喜欢
    • 1970-01-01
    • 2023-03-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-12-03
    • 2023-02-25
    • 2014-04-30
    • 2015-01-21
    相关资源
    最近更新 更多