javascript - 我必须刷新页面才能运行 Greasemonkey 脚本？

Question

所以我知道这与 AJAX 有关，但我已经阅读了一些主题并且不太明白我必须做什么。目前一切正常，但我必须刷新页面才能运行我的脚本。需要对我的代码执行什么操作才能使其在不刷新的情况下正常工作？

// ==UserScript==
// @name    Job Aids
// @description Aid in closing tickets
// @include https://techaccess.ad.qintra.com/WorkJobs/WorkJobs.aspx*
// @namespace   camzilla.net
// @version     1.1.20121128
// ==/UserScript==

var url  = window.location.href.split(".aspx");
var page = url[1].toLowerCase();

if (page == "#finaltest") {
    window.addEventListener ("load", finalResults, false);
} else if (page == "#threetoneslope") {
    window.addEventListener ("load", toneSlopeResults, false);
} else if (page == "#codes") {
    window.addEventListener ("load", closingComments, false);
} else if (page == "#cras") {
    window.addEventListener ("load", crasResults, false);
} else if (page == "#jobinfo") {
    window.addEventListener ("load", addLinks, false);
} else if (page == "") {
    if (getCookie("updater") == null) {
        var d = new Date();

        setCookie("updater", d.getTime(), 1);
        try {
            updateCheck();
        } catch(err) {
            // alert('Update checking failed');
        }
    }

    // setTimeout(promptDispatch, 1000);
}

function addLinks() {
    var mydiv   = document.querySelector('div[data-bind="CurrentJob.addr"]');
    var address = 'https://maps.google.com/maps?q=' + mydiv.textContent + ", UT";
    address.replace(/ /g, '+');  
    var a       = document.createElement("a");
    var txt     = document.createTextNode(mydiv.textContent);
    mydiv.textContent = "";
    a.appendChild(txt);
    a.href   = address;
    a.target = '_blank';
    mydiv.appendChild(a);

    mydiv   = document.querySelector('div[data-bind="CurrentJob.cktid"]');
    address = 'http://acmspjv1.interprise.com/cgi-bin/QC/DSL/dslam6100Int.pl?telephoneNum=';
    address+= mydiv.textContent;
    a       = document.createElement("a");
    txt     = document.createTextNode(mydiv.textContent);
    mydiv.textContent = "";
    a.appendChild(txt);
    a.href   = address;
    a.target = '_blank';
    mydiv.appendChild(a);
}

function updateCheck() {
    try {
        GM_xmlhttpRequest(
        {
            method: 'GET',
            url: 'http://camzilla.net/downloads/jobAids.user.js?v' + getCookie("updater"),
            headers: {'Cache-Control': 'no-cache'},
            onload: function(resp) {
                var local_version, remote_version, rt, script_name;

                rt = resp.responseText;
                remote_version = (/@version\s*(.*?)\s*$/m.exec(rt)[1]);
                local_version  = GM_info.script.version;

                if (remote_version != local_version) {

                    if(confirm(GM_info.script.name+' update v'+remote_version+ ' is available.\nWould you like to install it now?')) {
                        GM_openInTab('http://camzilla.net/downloads/jobAids.user.js');
                    } else {
                        alert('You will be reminded again tomorrow');
                    }
                }
            }
        });
    } catch(err) {
        // do something here
    }
}

function setCookie(c_name, value, exdays) {
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
    document.cookie=c_name + "=" + c_value;
}

function getCookie(c_name) {
    var i,x,y,ARRcookies=document.cookie.split(";");

    for (i=0;i<ARRcookies.length;i++) {

        x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
        y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
        x=x.replace(/^\s+|\s+$/g,"");

        if (x==c_name) {
            return unescape(y);
        }
    }

    return null;
}

function finalResults() {
    var dc, current, loss, noise, pi, lb;

    dc      = getRandom(51, 49, 2);   
    current = getRandom(37, 29, 2);
    loss    = getRandom(7, 2, 2);
    noise   = getRandom(7, 1, 2);
    pi      = getRandom(67, 60, 2);
    lb      = getRandom(79, 70, 2);

    document.getElementById('finalTestInsightNo').click();

    document.getElementById("finalTestBeforeAcTg").value        = "0.00";
    document.getElementById("finalTestBeforeAcRg").value        = "0.00";
    document.getElementById("finalTestBeforeAcTr").value        = "0.00";
    document.getElementById("finalTestBeforeDcTr").value        = dc;
    document.getElementById("finalTestBeforeDcTg").value        = "0.00";
    document.getElementById("finalTestBeforeDcRg").value        = dc;
    document.getElementById("finalTestBeforeLoopCurrent").value = current;
    document.getElementById("finalTestAfterLoss").value         = loss;
    document.getElementById("finalTestAfterNoise").value        = noise;
    document.getElementById("finalTestAfterPi").value           = pi;
    document.getElementById("finalTestAfterLb").value           = lb;

    document.getElementById("finalTestAfterLb").focus();
    window.scrollTo(0, document.body.scrollHeight-250);

    // Store cookies to be used on cras page if needed
    setCookie("loss", loss, 1);
    setCookie("pi", pi, 1);
    setCookie("current", current, 1);
    setCookie("noise", noise, 1);
    setCookie("lb", lb, 1);
}

function crasResults() {
    document.getElementById("crasCircuitLoss").value    = getCookie("loss");
    document.getElementById("crasPowerInfluence").value = getCookie("pi");
    document.getElementById("crasLineCurrent").value    = getCookie("current");
    document.getElementById("crasCircuitNoise").value   = getCookie("noise");
    document.getElementById("crasBalance").value        = getCookie("lb");

    document.getElementById('crasFoundInF2').click();
}

function toneSlopeResults() {
    var dc = getRandom(51, 49, 2);   

    document.getElementById("ToneSlopeInsightNo").click();
    document.getElementById("ToneSlopeDmarcTaggedYes").click();
    document.getElementById("ToneSlopeClecDtPresentYes").click();

    document.getElementById("ToneSlopeBeforeDcTr").value    = dc;
    document.getElementById("ToneSlopeBeforeDcTg").value    = "0.00";
    document.getElementById("ToneSlopeBeforeDcRg").value    = dc;   
    document.getElementById("ToneSlopeRingbackTr").value    = getRandom(90,85,2);
    document.getElementById("ToneSlopeAfterResistTg").value = getRandom(998,20,0);
    document.getElementById("ToneSlopeAfterResistRg").value = getRandom(998,20,0);
    document.getElementById("ToneSlopeAfterResistTr").value = getRandom(998,20,0);

    document.getElementById("ToneSlopeAfter404").value      = "0.00";
    document.getElementById("ToneSlopeAfter1004").value     = getRandom(7, 3, 2);
    document.getElementById("ToneSlopeAfter2804").value     = "0.00";
    document.getElementById("ToneSlopeAfterNoise").value    = getRandom(7, 1, 2);
    document.getElementById("ToneSlopeAfterLb").value       = getRandom(79, 70, 2);
    document.getElementById("ToneSlopeCotName").value       = "NA";

    document.getElementById("ToneSlopeTn").focus();
}

function closingComments() {
    document.getElementById("flatRateJacks").value = "0";
    document.getElementById("rewiredJacks").value  = "0";

    document.getElementById("tripNo").click();
    document.getElementById("marketMass").click();
    document.getElementById("custTypeRes").click();
    document.getElementById("pairChangeNo").click();
    document.getElementById("tempDropNo").click();
    document.getElementById("goodCbrYes").click();

    document.getElementById("jobCloseComments").focus();
    window.scrollTo(0, 5000);
}

function getRandom(max, min, tenths) {
    var result = min + (Math.random() * (max - min + 1));
    return result.toFixed(tenths);
}

Answer 1

请参阅“addEventListener 仅在页面刷新时工作？” 了解更多信息和类似情况。

您的脚本所期望的页面元素无疑会在load事件触发后出现。此外，从您的评论中，听起来页面的整个部分都被 AJAX 换掉了，但是 AJAX 足够礼貌，可以更改 URL 哈希。这意味着您将要触发该hashchange事件。

addEventListener ("load"...在这种情况下不要使用。将waitForKeyElements() 实用程序与hashchange.

无需重构整个脚本以使用 jQuery（这将提供更清晰和更健壮的代码），将之前的所有内容替换function addLinks() {...为：

// ==UserScript==
// @name        Job Aids
// @description Aid in closing tickets
// @include     https://techaccess.ad.qintra.com/WorkJobs/WorkJobs.aspx*
// @namespace   camzilla.net
// @version     1.1.20121128
// @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 design change
    introduced in GM 1.0.   It restores the sandbox.
*/

//-- Pages are "loaded" via AJAX...
window.addEventListener ("hashchange", fireOnNewPage,  false);

waitForKeyElements ("#crasCircuitLoss",                 crasResults);
waitForKeyElements ("#finalTestInsightNo",              finalResults);
waitForKeyElements ("#flatRateJacks",                   closingComments);
waitForKeyElements ("#ToneSlopeInsightNo",              toneSlopeResults);
waitForKeyElements ("div[data-bind="CurrentJob.addr"]", addLinks);

function fireOnNewPage () {
    switch (location.hash.toLowerCase() ) {
        case "#finaltest":
        case "#threetoneslope":
        case "#codes":
        case "#cras":
        case "#jobinfo":
            //-- No action needed, waitForKeyElements() handles this.
        break;
        default:
            if (getCookie("updater") == null) {
                var d = new Date();

                setCookie("updater", d.getTime(), 1);
                try {
                    updateCheck();
                } catch(err) {
                    // alert('Update checking failed');
                }
            }
        break;
    }
}
fireOnNewPage ();   //-- Initial run on initial, full page load.

Answer 2

通过搜索查看网上的一些 ajax 示例。例如：http ://www.w3schools.com/ajax/ajax_examples.asp

AJAX 或 (A) 同步 (J) avascript (A)nd (X)ML（有趣的是，如今更倾向于使用 JSON），是一种 Javascript 使用浏览器对象与远程服务器通信的系统。这样做的一般用例是能够更新客户端的界面而无需转到另一个页面。不过，在我们开始之前，请注意几句。

不建议将 Ajax 用于登录身份验证和发布表单用户可以关闭 Javascript，或者由于 IT 政策可能会限制运行 Javascript

考虑到这一点，建议您不要将 AJAX 用作关键用户功能的唯一解决方案！总是有一个后备！注意：此社区 wiki 帖子使用 JQuery 来显示示例 AJAX 调用。推荐给新手，因为它隐藏了进行 AJAX 调用的浏览器兼容性问题。有关 JQuery 的更多信息，请查看 JQuery 网站。

注意：这些示例使用与 PHP 服务器的通信，但任何服务器端语言都可以使用。

AJAX 回调

function makeAjaxCall() {
  $.ajax({
    url: 'ajax/test.html',
    success: function(data) {
      alert('Horray the AJAX call succeeded!');
    },
    error: function(xhr, error) {
      alert('Holy errors batman!');
    }
  });
}

AJAX 调用的本质

AJAX 调用可以是异步的或同步的。异步意味着浏览器将发出 AJAX 请求并继续做其他事情。同步意味着浏览器将停止它正在执行的操作，直到 AJAX 调用完成。这是两个代码方面差异的示例：

// An asynchronous call
// This is the default
$.ajax({
  url: '/server.php',
  success: function(data) {
    alert('Horray the AJAX call succeeded!');
  },
  error: function(xhr, error) {
    alert('Holy errors batman!');
  }
});
// This will get called right away
myFunction();
Now for a synchronous call:

// A synchronous call
$.ajax({
  url: '/server.php',
  async: false, // set the property here
  success: function(data) {
    alert('Horray the AJAX call succeeded!');
  },
  error: function(xhr, error) {
    alert('Holy errors batman!');
  }
});