lista - script type= text/javascript para que sirve

¿Userscript para esperar a que se cargue la página antes de ejecutar las técnicas de código?

Question

Estoy escribiendo un script de usuario de Greasemonkey y deseo que se ejecute un código específico cuando la página termine de cargarse por completo, ya que devuelve un recuento de div que quiero que se muestre.

El problema es que esta página en particular a veces toma un poco antes de que todo se cargue.

Lo he intentado, documento $(function() { }); y $(window).load(function(){ }); envoltorios Sin embargo, ninguno parece funcionar para mí, aunque podría estar aplicándolos mal.

Lo mejor que puedo hacer es usar un setTimeout(function() { }, 600); Que funciona, aunque no siempre fiable.

¿Cuál es la mejor técnica para usar en Greasemonkey para asegurar que un código específico se ejecutará cuando la página termine de cargarse?

Answer 1

A partir de Greasemonkey 3.6 (20 de noviembre de 2015), la clave de metadatos @run-at admite el nuevo valor de document-idle . Simplemente coloque esto en el bloque de metadatos de su script de Greasemonkey:

// @run-at      document-idle

La documentation describe como sigue:

La secuencia de comandos se ejecutará después de que la página y todos los recursos (imágenes, hojas de estilo, etc.) se carguen y se ejecuten las secuencias de comandos de la página.

Answer 2

Este es un problema común y, como ha dicho, esperar la carga de la página no es suficiente, ya que AJAX puede cambiar las cosas mucho después de eso.

Hay una utilidad robusta estándar (ish) para estas situaciones. Es la utilidad waitForKeyElements() .

Úsalo así:

// ==UserScript==
// @name     _Wait for delayed or AJAX page load
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a major design
    change introduced in GM 1.0.
    It restores the sandbox.
*/

waitForKeyElements ("YOUR_jQUERY_SELECTOR", actionFunction);

function actionFunction (jNode) {
    //-- DO WHAT YOU WANT TO THE TARGETED ELEMENTS HERE.
    jNode.css ("background", "yellow"); // example
}

Dé detalles exactos de su página de destino para un ejemplo más específico.

Answer 3

Greasemonkey (por lo general) no tiene jQuery. Así que el enfoque común es utilizar

window.addEventListener(''load'', function() {
    // your code here
}, false);

dentro de tu script de usuario

Answer 4

Para detectar si el XHR terminó de cargarse en la página web, se activará alguna función. Obtengo esto de ¿Cómo uso JavaScript para almacenar los mensajes "XHR terminado de cargar" en la consola en Chrome? y funciona de verdad.

    //This overwrites every XHR object''s open method with a new function that adds load and error listeners to the XHR request. When the request completes or errors out, the functions have access to the method and url variables that were used with the open method.
    //You can do something more useful with method and url than simply passing them into console.log if you wish.
    //https://.com/questions/43282885/how-do-i-use-javascript-to-store-xhr-finished-loading-messages-in-the-console
    (function() {
        var origOpen = XMLHttpRequest.prototype.open;
        XMLHttpRequest.prototype.open = function(method, url) {
            this.addEventListener(''load'', function() {
                console.log(''XHR finished loading'', method, url);
                display();
            });

            this.addEventListener(''error'', function() {
                console.log(''XHR errored out'', method, url);
            });
            origOpen.apply(this, arguments);
        };
    })();
    function display(){
        //codes to do something;
    }

Pero si hay muchos XHR en la página, no tengo idea de cómo filtrar el XHR definido.

Otro método es waitForKeyElements () que es bueno. https://gist.github.com/BrockA/2625891
Hay una muestra para el uso de Greasemonkey. ¿Ejecutar script Greasemonkey en la misma página, varias veces?

Answer 5

Si desea manipular nodos como obtener valor de nodos o cambiar de estilo, puede esperar a que estos nodos utilicen esta función

const waitFor = (...selectors) => new Promise(resolve => {
    const delay = 500
    const f = () => {
        const elements = selectors.map(selector => document.querySelector(selector))
        if (elements.every(element => element != null)) {
            resolve(elements)
        } else {
            setTimeout(f, delay)
        }
    }
    f()
})

entonces usa la promise.then luego

// scripts don''t manipulate nodes
waitFor(''video'', ''div.sbg'', ''div.bbg'').then(([video, loading, videoPanel])=>{
    console.log(video, loading, videoPanel)
    // scripts may manipulate these nodes
})

o use async&await

//this semicolon is needed if none at end of previous line
;(async () => {
    // scripts don''t manipulate nodes
    const [video, loading, videoPanel] = await waitFor(''video'',''div.sbg'',''div.bbg'')
    console.log(video, loading, video)
    // scripts may manipulate these nodes
})()

Aquí hay un ejemplo de icourse163_enhance

Answer 6

envolviendo mis scripts en $(window).load(function(){ }) nunca me falló.

Tal vez su página haya finalizado, pero todavía se está cargando algo de contenido ajax.

Si ese es el caso, este buen código de puede ayudarlo a:
https://gist.github.com/raw/2625891/waitForKeyElements.js

Generalmente lo uso para monitorear los elementos que aparecen en la devolución de datos .

waitForKeyElements("elementtowaitfor", functiontocall) : waitForKeyElements("elementtowaitfor", functiontocall)

Answer 7

La respuesta de Brock es buena, pero me gustaría ofrecer otra solución al problema de AJAX, para que esté completo. Dado que su script también usa setInterval() para verificar periódicamente (300ms), no puede responder instantáneamente.

Si necesita responder de inmediato, puede usar MutationObserver() para escuchar los cambios de DOM y responder a ellos tan pronto como se crea el elemento.

(new MutationObserver(check)).observe(document, {childList: true, subtree: true});

function check(changes, observer) {
    if(document.querySelector(''#mySelector'')) {
        observer.disconnect();
        // code
    }
}

Aunque ya que check() en cada cambio de DOM, esto puede ser lento si el DOM cambia muy a menudo o su condición demora mucho tiempo en evaluarse.

Otro caso de uso es si no está buscando ningún elemento específico, sino simplemente esperando a que la página deje de cambiar. Puedes combinar esto con setTimeout() para esperar eso también.

var observer = new MutationObserver(resetTimer);
var timer = setTimeout(action, 3000, observer); // wait for the page to stay still for 3 seconds
observer.observe(document, {childList: true, subtree: true});

function resetTimer(changes, observer) {
    clearTimeout(timer);
    timer = setTimeout(action, 3000, observer);
}

function action(o) {
    o.disconnect();
    // code
}

Este método es tan versátil, que también puede escuchar los cambios de atributos y texto. Solo establece los attributes y los datos de characterData en true en las opciones

observer.observe(document, {childList: true, attributes: true, characterData: true, subtree: true});