且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

在每个页面加载(包括* AJAX页面加载)上运行我的脚本?

更新时间:2023-12-05 09:18:04

输入新搜索时,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!=正在加载
&amp ;!!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()