在每个页面加载时运行我的脚本,*包括* AJAX页面加载?

时间:2012-05-27 19:30:02

标签: javascript greasemonkey delay pageload

我想延迟特定网页(在本例中为Google)的页面加载时间,以便用户在倒数计时器完成之前无法看到网页。

这个问题的灵感来自xkcd,类似的问题是"Javascript page load delay of specific set of pages"

我已经尝试过Jonathan的Greasemonkey脚本的修改版本(见下文),但是这个脚本只会在Google首次使用特定标签时延迟Google页面加载。

如果Google在新标签页中打开,或者用户跟随Google的链接然后返回,则脚本会再次启动。但是,如果用户没有离开谷歌(比如,他们在每个搜索结果下找到他们在简短摘要中寻找的答案,那么只需搜索其他内容),他们就可以毫不拖延地进行搜索。

有没有办法强制延迟屏幕在每次搜索后出现(而不是每次访问页面后)? - 最好使用Greasemonkey还是Chrome插件?

目前使用的脚本:
(首先将阻止的地址设置为值“1”,将所有其他地址设置为值“0”,然后,如果阻止> 0,脚本将启动...)

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

})();
}

1 个答案:

答案 0 :(得分:1)

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

关于该剧本的一些随机说明:

  1. 使用@run-at document-start以便尽快开始消隐。
  2. 叠加层应为position: fixed;
  3. 避免设置全局或window.范围变量,AMAP。
  4. 以下是一个完整的脚本,可以在每次新的Google搜索中清空页面:

    // ==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()