在每个页面加载（包括* AJAX页面加载）上运行我的脚本？ [英] Run my script on each page load, *including* AJAX page-loads?

查看：79
本文介绍了在每个页面加载（包括* AJAX页面加载）上运行我的脚本？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想延迟特定网页（在本例中为Google）的页面加载时间，以便用户在倒数计时器完成之前看不到该网页。



此问题是 xkcd 的启发，而类似的问题是特定页面集的Javascript页面加载延迟 。 p>

我已经尝试过修改版本的Jonathan的Greasemonkey脚本（请参见下文），但是此脚本仅在第一次在特定标签中使用Google时才延迟Google页面的加载。 / p>

如果在新标签页中打开了Google，或者用户点击了来自Google的链接，然后返回，则脚本再次启动。但是，如果用户从未离开过Google（例如，他们在每个搜索结果下的简短摘要中找到了他们正在寻找的答案，然后仅搜索其他内容），就可以毫无延迟地进行搜索。



是否有一种方法可以强制在每次搜索之后（而不是每次访问该页面之后）出现延迟屏幕？ -最好使用Greasemonkey或Chrome插件？



当前使用的脚本：

（首先将被阻止的地址设置为 1 ，然后将所有其他地址的值都设置为 0，那么，如果block> 0，脚本就会启动...）

 （function（）{
 // //注意：这实际上不会阻止页面加载，但是会将其隐藏，所以您知道它的
 //在这里等待;互联网糖果的多巴胺会成为一种折磨。最好打扫
 //您的房间或打开irb提示
 window.seconds = 30; 
 
函数resetCountDown（） 
 {
秒= 30; 
} 
 
 //您可以使用Cyber​​sauce 
 window.clearDelay = function（）
 {
 document.getElementById（'eightSixTwoDelay'）。style.display ='none'; 
} 
 
 var overlay = document.createElement（'div'）; 
 overlay。 id ='eightSixTwoDelay'; 
 overlay.style.bac kgroundColor =‘＃000’; 
 overlay.style.color =‘#FFF’; 
 overlay.style.fontSize ='56px'; 
 overlay.style.fontFamily =‘Helvetica，Arial，Sans’； 
 overlay.style.fontWeight ='bold'; 
 overlay.style.textDecoration ='none'; 
 overlay.style.position =绝对； 
 overlay.style.top = 0px； 
 overlay.style.left ='0px'; 
 overlay.style.width ='100％'; 
 // clientHeight随着内容加载而变化，并且JS（如PHX Valley Metro系统）不会等待您运行。 
 overlay.style.height = document.body.clientHeight +'px'; //‘100％’； 
 overlay.style.paddingTop =‘10px’； 
 overlay.style.paddingLeft =‘10px’； 
 overlay.style.textAlign =‘左’； 
 overlay.style.zIndex = 10000； //超过9000 
 
 overlay.addEventListener（ click，resetCountDown，true）; //没有逃生
 
 document.getElementsByTagName（’body’）[0] .appendChild（overlay）; 
 
 window.displayDelay = function（）
 {
 if（seconds> -1）
 {
 document.getElementById（'eightSixTwoDelay'）。 innerHTML ='页面在'+秒+'秒内准备就绪。'; 
秒-= 1; 
 setTimeout（window.displayDelay，1000）; 
} 
其他
 {
 clearDelay（）; 
} 
} 
 
 
 window.onload = displayDelay（）; 
 
}）（）; 
}


解决方案

输入新搜索时，Google会在新页面中礼貌地更改URL以及AJAXing。因此，请监听 hashchange 事件，确定何时运行新搜索。



该脚本上有一些随机注释：


  1. 使用 @ run-at document-start ，这样消隐开始于

  2. 叠加层应位于位置：固定； 。

  3. 避免设置全局或窗口。范围变量，AMAP。

这是一个完整的脚本会在每次进行新的Google搜索时使页面空白：

  // == UserScript == 
 // @name _延迟一个页面显示，一个XKCD 
 // @namespace _pc 
 // @match http：//*.google.com/* 
 // @run -at document-start 
 // // == / UserScript == 
 
 / * ---在DOM可用后以及在
 URL时都黑屏（标签）更改-通过AJAX向新页面加载
时会发生这种情况。 
 * / 
 window.addEventListener（ readystatechange，FireWhenReady，true）; 
 window.addEventListener（ hashchange，blankScreenForA_While，true）; 
 
函数FireWhenReady（）{
 this.fired = this.fired ||假; 
 
 if（document.readyState！=未初始化 
&& document.readyState！=正在加载 
& ;!！this.fired 
 ）{
 this.fired = true; 
 blankScreenForA_While（）; 
} 
} 
 
函数blankScreenForA_While（）{
 / *注意：这实际上并不会阻止页面加载，但会将其隐藏，
所以你知道它在那里，等待；互联网糖果的多巴胺成为一种折磨。 
最好打扫房间或打开irb提示。 
 * / 
 //-设置：
 var pageDelaySeconds = 5; 
 var overlayID = gmEightSixTwoDelay 
 
 //-一次性设置，对于每个新的页面，开始：
函数resetCountDown（）{
 blankScreenForA_While.secondsRemaining = pageDelaySeconds; 
} 
 resetCountDown（）; 
 
 
函数createOverlay（）{
 var overlay = document.getElementById（overlayID）; 
 if（overlay）{
 overlay.style.display =‘block’; //取消隐藏。 
的回报； 
} 
 overlay = document.createElement（‘div’）; 
 overlay.id = overlayID; 
 overlay.style.cssText = \ 
字体：粗体56px Helvetica，Arial，Sans; \ 
文本修饰：无； \ 
位置：固定； ＼ top 
顶部：0； \ 
左侧：0； \ 
宽度：100％； \ 
高度：100％； \ 
 z-index ：10000; / *超过9000 * / \ 
保证金：0; \ 
溢出：隐藏; \ 
颜色：粉红色; \ 
背景： 酸橙; \ 
行高：1.5； b 
填充：1em； \ 
 text-align：center; \ 
; 
 
 //-仅一次使用innerHTML。
 overlay.innerHTML ='去做一些重要的事情！< br>'
 +'页面在< span>< / span>秒内准备就绪。'
; 
 
 //没有逃脱。
 overlay.addEventListener（ click， resetCountDown，true）; 
 
 document.body.appendChild（overlay）; 
} 
 createOverlay（）; 
 
 //-时间设置，对于每个新的页面，：END 
 
 
 //您可以使用Cyber​​sauce 
函数clearDelay（）{
 document.getElementById（overlayID）。 style.display ='none'; 
} 
 
 
函数displayDelay（）{
 if（blankScreenForA_While.secondsRemaining> -1）{
 var displaySpan = document.querySelector（
＃ + overlayID + span 
 ）; 
 displaySpan.textContent = blankScreenForA_While.secondsRemaining; 
 
 blankScreenForA_While.secondsRemaining--; 
 setTimeout（displayDelay，1000）; 
} 
 else {
 clearDelay（）; 
} 
} 
 displayDelay（）; 
 
} //-结尾：blankScreenForA_While（）


I want to delay the page-load time for a specific web page - in this case, Google - so that users can't see the web page until a count-down timer has completed.

This question was inspired xkcd, and a similar question is "Javascript page load delay of specific set of pages".

I've tried a modified version of Jonathan's Greasemonkey script (see below), but this script only delays the Google page load the first time Google is used in a particular tab.

If Google is opened in a new tab, or the user follows a link from Google then returns, the script kicks in again. But, if the user doesn't ever navigate away from Google (say, they find the answer they were looking for in the brief abstract under each search result, then just search for something else), they can search without any delay.

Is there a way to force the delay screen to appear after each search (as opposed to after each time the page is visited)? -- preferably using either Greasemonkey or a Chrome plug-in?

Script currently used:
(first sets blocked addresses to a value of "1" and all other addresses to a value of "0," then, if block>0, the script kicks in...)

(function(){
    // Note: This doesn't actually stop the page from loading, but hides it, so you know its 
    // there, waiting; The dopamine of internet candy becomes a torture.  Better to clean 
    // your room or open an irb prompt instead.
    window.seconds = 30;

    function resetCountDown()
    {
        seconds = 30;
    }

    // You can has cybersauce
    window.clearDelay = function()
    {
        document.getElementById('eightSixTwoDelay').style.display = 'none';
    }

    var overlay = document.createElement('div');
    overlay.id = 'eightSixTwoDelay';
    overlay.style.backgroundColor = '#000';
    overlay.style.color = '#FFF';
    overlay.style.fontSize = '56px';
    overlay.style.fontFamily = 'Helvetica, Arial, Sans';
    overlay.style.fontWeight = 'bold';
    overlay.style.textDecoration = 'none';
    overlay.style.position = 'absolute';
    overlay.style.top = '0px';
    overlay.style.left = '0px';
    overlay.style.width = '100%';
    // clientHeight changes as content loads, and JS, like the PHX Valley Metro system, does not wait for you to run.
    overlay.style.height = document.body.clientHeight + 'px'; //'100%'; 
    overlay.style.paddingTop = '10px';
    overlay.style.paddingLeft = '10px';
    overlay.style.textAlign = 'left';
    overlay.style.zIndex = '10000'; // OVER 9000

    overlay.addEventListener("click", resetCountDown, true); // THERE IS NO ESCAPE

    document.getElementsByTagName('body')[0].appendChild(overlay);

    window.displayDelay = function()
    {
        if (seconds > -1)
        {
            document.getElementById('eightSixTwoDelay').innerHTML = 'Page ready in ' + seconds + ' seconds.';
            seconds -= 1;
            setTimeout(window.displayDelay, 1000);
        }
        else
        {
            clearDelay();
        }
    }


    window.onload = displayDelay();

})();
}

解决方案

When a new search is entered, Google politely changes the URL, as well as AJAXing-in the new page. So, listen for the hashchange event to determine when a new search was run.

Some random notes on that script:

  1. Use @run-at document-start so that the blanking starts as soon as possible.
  2. The overlay should be position: fixed;.
  3. Avoid setting global or window. scope variables, AMAP.

Here is a complete script that blanks the page on each new Google search:

// ==UserScript==
// @name        _Delay a page display, a la XKCD
// @namespace   _pc
// @match       http://*.google.com/*
// @run-at      document-start
// ==/UserScript==

/*--- Blank the screen as soon as the DOM is available, and also whenever
    the URL (hashtag) changes -- which happens when "new" pages are loaded
    via AJAX.
*/
window.addEventListener ("readystatechange",    FireWhenReady,          true);
window.addEventListener ("hashchange",          blankScreenForA_While,  true);

function FireWhenReady () {
    this.fired  = this.fired || false;

    if (    document.readyState != "uninitialized"
        &&  document.readyState != "loading"
        &&  ! this.fired
    ) {
        this.fired  = true;
        blankScreenForA_While ();
    }
}

function blankScreenForA_While () {
    /*  Note: This doesn't actually stop the page from loading, but hides it,
        so you know its there, waiting; The dopamine of internet candy becomes
        a torture.
        Better to clean your room or open an irb prompt instead.
    */
    //--- Settings:
    var pageDelaySeconds    = 5;
    var overlayID           = "gmEightSixTwoDelay"

    //--- One-time setup, for each new "page", START:
    function resetCountDown () {
        blankScreenForA_While.secondsRemaining  = pageDelaySeconds;
    }
    resetCountDown ();


    function createOverlay () {
        var overlay                 = document.getElementById (overlayID);
        if (overlay) {
            overlay.style.display   = 'block';  // Un-hide.
            return;
        }
        overlay                     = document.createElement ('div');
        overlay.id                  = overlayID;
        overlay.style.cssText       = "                                 \
            font:                   bold 56px Helvetica,Arial,Sans;     \
            text-decoration:        none;                               \
            position:               fixed;                              \
            top:                    0;                                  \
            left:                   0;                                  \
            width:                  100%;                               \
            height:                 100%;                               \
            z-index:                10000;  /* OVER 9000 */             \
            margin:                 0;                                  \
            overflow:               hidden;                             \
            color:                  pink;                               \
            background:             lime;                               \
            line-height:            1.5;                                \
            padding:                1em;                                \
            text-align:             center;                             \
        ";

        //--- Only use innerHTML the one time.
        overlay.innerHTML           = 'Go do something important!<br>'
                                    + 'Page ready in <span></span> seconds.'
                                    ;

        // THERE IS NO ESCAPE.
        overlay.addEventListener( "click", resetCountDown, true);

        document.body.appendChild (overlay);
    }
    createOverlay ();

    //--- One-time setup, for each new "page", :END


    // You can has cybersauce
    function clearDelay () {
        document.getElementById (overlayID).style.display = 'none';
    }


    function displayDelay () {
        if (blankScreenForA_While.secondsRemaining > -1) {
            var displaySpan         = document.querySelector (
                                        "#" + overlayID + " span"
                                    );
            displaySpan.textContent = blankScreenForA_While.secondsRemaining;

            blankScreenForA_While.secondsRemaining--;
            setTimeout (displayDelay, 1000);
        }
        else {
            clearDelay ();
        }
    }
    displayDelay ();

}//-- End of: blankScreenForA_While()

这篇关于在每个页面加载（包括* AJAX页面加载）上运行我的脚本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆