Запускать мой скрипт при каждой загрузке страницы, *включая* загрузку страниц AJAX?

Я хочу отсрочить время загрузки определенной веб-страницы (в данном случае Google), чтобы пользователи не могли видеть веб-страницу до тех пор, пока таймер обратного отсчета не завершит работу.

Этот вопрос был вдохновлен xkcd, и аналогичный вопрос "Задержка загрузки страницы JavaScript для определенного набора страниц".

Я пробовал модифицированную версию сценария Джонатана 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();

})();
}

person user1420508    schedule 27.05.2012    source источник


Ответы (1)


Когда вводится новый поисковый запрос, Google вежливо изменяет URL-адрес, а также использует AJAX для новой страницы. Итак, прослушайте событие hashchange, чтобы определить, когда был запущен новый поиск.

Некоторые случайные заметки об этом скрипте:

  1. Используйте @run-at document-start, чтобы гашение началось как можно скорее.
  2. Наложение должно быть position: fixed;.
  3. Избегайте установки глобальных или window. переменных области видимости, AMAP.

Вот полный скрипт, который очищает страницу при каждом новом поиске в 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()
person Brock Adams    schedule 27.05.2012