Greasemonkey - дождитесь загрузки страницы перед выполнением методов кода

Я пишу приветственный скрипт Greasemonkey и хочу, чтобы конкретный код выполнялся, когда страница полностью заканчивает загрузку, так как она возвращает значение div, которое я хочу отобразить.

Проблема в том, что эта конкретная страница иногда занимает немного до того, как все загрузится.

Я пробовал документы $(function() { }); и $(window).load(function(){ });. Тем не менее, никто не работает для меня, хотя я мог бы применять их неправильно.

Лучше всего я могу использовать setTimeout(function() { }, 600);, который работает, хотя и не всегда надежный.

Какой лучший способ использовать в Greasemonkey для обеспечения выполнения определенного кода при завершении загрузки страницы?

Ответ 1

Greasemonkey (обычно) не имеет jQuery. Таким образом, общий подход заключается в использовании

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

внутри вашего usercript

Ответ 2

Это обычная проблема, и, как вы сказали, ожидание загрузки страницы недостаточно - поскольку AJAX может и многое изменит после этого.

В этих ситуациях существует стандартная (иш) надежная утилита. Это утилита waitForKeyElements().

Используйте его так:

// ==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
}

Дайте точную информацию о целевой странице для более конкретного примера.

Ответ 3

обертка моих скриптов в $(window).load(function(){ }) никогда не сработала для меня.

Возможно, ваша страница закончилась, но все еще загружается содержимое ajax.

Если это так, этот хороший фрагмент кода Brock Adams может вам помочь:
https://gist.github.com/raw/2625891/waitForKeyElements.js

Я обычно использую его для мониторинга элементов, которые появляются при обратной передаче.

используйте его следующим образом: waitForKeyElements("elementtowaitfor", functiontocall)

Ответ 4

Как и в случае с Greasemonkey 3.6 (20 ноября 2015 г.), ключ метаданных @run-at поддерживает новое значение document-idle. Проще говоря, это в блоке метаданных вашего Greasemonkey script:

// @run-at      document-idle

Документация описывает ее следующим образом:

script будет запущен после того, как страница и все ресурсы (изображения, таблицы стилей и т.д.) будут загружены и запущены скрипты страниц.

Ответ 5

Ответ Брок хорош, но я хотел бы предложить другое решение проблемы AJAX для полноты. Поскольку его script также использует setInterval() для периодической проверки (300 мс), он не может ответить мгновенно.

Если вам нужно немедленно ответить, вы можете использовать MutationObserver() для прослушивания изменений DOM и ответа на них, как только элемент будет создан

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

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

Хотя, поскольку check() срабатывает при каждом изменении DOM, это может быть медленным, если DOM изменяется очень часто или ваше условие требует много времени для оценки.

Другой вариант использования - если вы не ищете какой-либо конкретный элемент, а просто ожидаете, что страница перестанет меняться. Вы можете комбинировать это с setTimeout(), чтобы дождаться этого.

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
}

Этот метод настолько универсален, вы также можете прослушивать изменения атрибутов и текста. Просто установите attributes и characterData в true в параметрах

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