时间戳

首页 > 解决方案 > 用户脚本每分钟单击“刷新”按钮，除非有输入？

javascript - 用户脚本每分钟单击“刷新”按钮，除非有输入？

问题描述

我正在尝试创建一个 Tampermonkey 脚本，该脚本会每隔一段时间，最好是每分钟单击一次页面的“刷新”按钮。

如果它可以在您在网站上执行其他操作（例如打字）时暂停会更好，但这是可选的。

原因是我们在工作中使用的网站需要我们及时跟踪传入的客户请求，但该网站只有一个集成的刷新按钮，需要手动单击并且不会自动刷新。

有一些浏览器插件可以满足我的需要，但它们会刷新整个网页，这会导致它丢失以前完成的重要信息或设置。（网站上的刷新按钮不会发生这种情况）。

所以我发现的是 setInterval 和 .click 函数。我设置的是以下内容，有时有效，有时无效。但是每次它确实起作用时，即使禁用 Tampermonkey 也不会停止。

// ==UserScript==
// @name         Ticket System - Auto Refresh
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://my*******.***.****mand.com/*
// @grant        none
// ==/UserScript==

setInterval(function () {document.getElementById("buttonOcLMZKwM8KoKda967hf2B0_11").click();}, 10000);

//end

我在上面所做的工作中可能存在一些重大缺陷，但正如我所说，我没有使用 javascript 的经验。此外，所用的时间是测试，以便快速查看它是否有效。

正如您可能看到的那样，我已经卡在了刷新部分，所以打字时的停止部分甚至没有远程完成。

我也用过

document.getElementById("buttonOcLMZKwM8KoKda967hf2B0_11")

并且很可能会失败，因为当您再次登录时，该网站往往会更改此 ID。所以我尝试通过使用来做到这一点：

document.querySelector('[title="Refresh"]');

但这似乎根本不起作用，即使按钮的标题是刷新。

这是网站上的完整按钮 HTML：

<button type="button" id="buttonOcLMZKwM8KoKda967hf2B0_11" data-sap-ui="buttonOcLMZKwM8KoKda967hf2B0_11" 
data-sap-automation-id="OcLMZKwM8KoKda967hf2B0" title="Refresh" role="button"
aria-disabled="false" tabindex="0" class="sapUiBtn sapUiBtnIconOnly sapUiBtnLite sapUiBtnS width-button-form sapUiBtnStd">
<img id="buttonOcLMZKwM8KoKda967hf2B0_11-img" src="https://.........TbRefresh.png" 
alt="Refresh" class="sapUiBtnIco"></button>

我真的很感激我能得到的任何帮助。

标签： javascriptclickgreasemonkeytampermonkey

解决方案

开始和停止轮询，或间隔点击等；仅仅：

  1. 存储setInterval()调用的值。
    例如：var myTimer = setInterval (someFunction, 1000);
  2. 将该值传递给以clearInterval()停止循环。
    例如：clearInterval (myTimer);

当然，用户界面是最难的部分。我喜欢：

  1. 在屏幕的右上角放置一个状态和控制按钮。
  2. 绑定键盘快捷键，以便能够在不需要鼠标的情况下切换循环。

以下用户脚本完成了上述所有操作，此外：

  1. 在循环的每次迭代中单击“刷新”按钮。
  2. 单击控制按钮时停止/重新启动循环。
  3. 按下时停止/重新启动F9（取决于焦点所在的位置）。
  4. 选择或输入其中一个形式控件时，停止循环。
  5. 单击“刷新”按钮时重新启动循环。

这是一个完整的工作用户脚本（它只是块上方的******部分。）。
要查看它的实际效果，请运行代码片段。

// ==UserScript==
// @name     _Click button regularly, with start/stop controls
// @match    *://YOUR_SERVER.COM/YOUR_PATH/*
// @require  https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==

//--- Initialize the refresh button loop and controls.
var rfrshBtnSel = 'button[title="Refresh"]';  //  jQuery selector for the refresh
var rfrshTmr    = LoopManager (clickRefreshButton, 1000);  //  1000 ms == 1 second.
var loopStBtn   = LoopButtonManager (rfrshTmr.toggle);

rfrshTmr.setCallbacks (loopStBtn.start, loopStBtn.stop, loopStBtn.error);
rfrshTmr.start ();  //  Start looping the refresh btn click.

$(window).keydown (keyboardShortcutHandler);

//--- On use of certain form controls, stop the refresh timer:
$("body").on (
    "click keydown focus paste scroll", "input, textarea, select", rfrshTmr.stop
);
//--- On click of the refresh button, (re)start the refresh timer:
$("body").on ("click", rfrshBtnSel, rfrshTmr.start);

function clickRefreshButton () {
    var refreshBtn = $(rfrshBtnSel);
    if (refreshBtn.length === 1)  clickNode (refreshBtn);
    else loopStBtn.error ("Refresh button not found!");
}
function keyboardShortcutHandler (zEvent) {
    if (zEvent.which == 120) {  //  On F9, Toggle the Loop state.
        rfrshTmr.toggle ();
        return false;
    }
    return true;
}
function clickNode (jNode) {
    var clickEvent  = document.createEvent ('MouseEvents');
    clickEvent.initEvent ('click', true, true);
    jNode[0].dispatchEvent (clickEvent);
}

function LoopManager (callbackFnc, intrvlMillisec, bAutoStart, ...optParams) {
    var _thisInterval = null;
    var _startCB = null, _stopCB = null, _errorCB = null;
    if (bAutoStart)  _start ();

    function _start () {
        if ( ! _thisInterval) {
            _thisInterval = setInterval (callbackFnc, intrvlMillisec, ...optParams);
        }
        if (_startCB)  _startCB ();
    }
    function _stop () {
        clearInterval (_thisInterval);
        _thisInterval = null;
        if (_stopCB)  _stopCB ();
    }
    function _toggle () {
        if (_thisInterval)  _stop ();
        else                _start ();
    }
    function _setCallbacks (startCB, stopCB, errorCB) {
        _startCB = startCB; _stopCB = stopCB; _errorCB = errorCB;
    }
    return {
        start: _start,  stop: _stop,  setCallbacks: _setCallbacks,  toggle: _toggle
    };
}
function LoopButtonManager (clickCB) {
    var _btnNode = $('#tmStartStopBtn');
    if (_btnNode.length === 0) {
        _btnNode = $( `
            <button id="tmStartStopBtn" type="button" class="tmRefreshRunning">
                <span>TBD</span> (F9)
            </button>
        ` ).appendTo ("body");
    }
    var _spanNode = _btnNode.find ("span");

    _btnNode.click (clickCB);

    function _start () {
        setButtonDisplay ("Running", "tmRefreshRunning");
    }
    function _stop () {
        setButtonDisplay ("Stopped", "tmRefreshStopped");
    }
    function _error (errMess) {
        console.error ("TM: " + errMess);
        setButtonDisplay ("See console!", "tmError");
    }
    function setButtonDisplay (btnText, btnClass) {
        _spanNode.text (btnText);
        _btnNode.removeClass ();
        if (btnClass)  _btnNode.addClass (btnClass);
    }
    return { start: _start,  stop: _stop,  error: _error };
}
GM_addStyle ( `
    #tmStartStopBtn {
        position:           absolute;
        top:                0;
        right:              0;
        font-size:          18px;
        margin:             5px;
        opacity:            0.9;
        z-index:            1100;
        padding:            5px 20px;
        color:              black;
        cursor:             pointer;
    }
    .tmRefreshRunning { background: orange; }
    .tmRefreshStopped { background: lime; }
    .tmError { background: red; }
` );

/********************************************************************
******* Everything below this block is simulated target page. *******
******* It's NOT part of the userscript.                      *******
********************************************************************/
$('button[title="Refresh"]').click ( function () {
    $(this).attr ("id", 'spelunk' + Math.random () );
    $("#StatusNd").text ("Refreshed: " + (new Date() + '').replace (/\s*\(.+\)/, "") );
} );
div {
    margin: 0 0 1ex 1em;
    width: 20em;
    padding: 0.5ex 1em 0 1em;
    border: 1px solid darkgreen;
    border-radius: 1ex;
}
label { margin: 0 0 0 2em; }
label[for="Bar"] { display: inline-block;  vertical-align: top; }
button, #StatusNd { margin: 0 0 1ex 2em; }
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://greasyfork.org/scripts/44560-gm-addstyle-shim/code/GM_addStyle_shim.js"></script>
<p>This userscript will click the "Refresh" button every second,<br> unless typing in an input.</p>
<div>Some inputs:<br>
    <label>Foo: <input type="text" id="Foo"></label><br><br>
    <!-- <label for="Bar">Bar: </label>
    <textarea id="Bar"></textarea> -->
</div>
<button type="button" id="some_random_ID" title="Refresh">Refresh</button>
<p id="StatusNd"></p>

推荐阅读