Скрипт Greasemonkey игнорирует setInterval?

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

Это мой код:

var perpetualScroll = function () {
    var scrolling = false;

    var scroll = function () {
        if (scrolling) {
            window.scrollTo(0, 0);
        }
    };

    var scrollDiv = document.createElement("div");
    scrollDiv.id = "topScroll0x2a";
    scrollDiv.innerHTML = '<a class="topScroll" onclick="scrolling = !scrolling;" style="display:block; position:fixed; bottom: 1em; right: 1em; color:#fff; background-color:#000; padding:.5em;" href="#">Start scroll</a>';
    document.body.appendChild(scrollDiv);

    var intervalId = window.setInterval(scroll, 50);
};

perpetualScroll();

Когда я нажимаю кнопку в нижнем углу, создаваемую скриптом, он переходит в верхнюю часть экрана, но не продолжает делать это постоянно.

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


person Michael0x2a    schedule 05.06.2012    source источник


Ответы (1)


Выполнение этого onclick не сработает так, как вы ожидаете. Ваш innerHTML - это просто строка, поэтому JS не знает, что он ограничен вашей perpetualScroll функцией.

onclick обработчики, представляющие собой строки, оцениваются в глобальной области, поэтому то, что у вас есть, эквивалентно этому:

 window.scrolling = !window.scrolling;

Нужная переменная scrolling отличается.

Вы должны создать настоящую функцию, подобную этой:

var a = document.createElement('a');
a.className = (a.className || "") + ' topScroll';
a.style.display = 'block';
a.style.position = 'fixed';
a.style.bottom = '1em';
a.style.right = '1em';
a.style.color = '#FFF';
a.style.backgroundColor = '#000';
a.style.padding = '0.5em';
a.href = '#';
a.onclick = function(e){
    scrolling = !scrolling;
    return false;
};
scrollDiv.appendChild(a);

Очевидно, что установка этого CSS ужасна, так что вы все равно должны поместить это в отдельную таблицу стилей.

person loganfsmyth    schedule 05.06.2012
comment
Ох, похоже, это намного лучший способ сделать это. Я не знал, что ты умеешь делать такие вещи, как a.style.blah, спасибо! (И да, я бы сделал отдельную таблицу стилей, но мне лень: D) - person Michael0x2a; 05.06.2012