在每个页面加载运行我的脚本，*包括* AJAX页面加载？

Question

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

这个问题的启发xkcd，和类似的问题是"Javascript page load delay of specific set of pages"。

我试过了Jonathan's Greasemonkey脚本的修改版本（见下文），但是这个脚本只会延迟Google首次在特定标签中使用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(); 

})(); 
} 

Answer 1

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

对剧本的几点思考：

1. 使用@run-at document-start使消隐尽快开始越好。
2. 覆盖应该是position: fixed;。
3. 避免设置全局或window.范围变量AMAP。

这里是一个空白的每一个新的谷歌搜索页面一个完整的脚本：

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