我必须刷新页面才能运行我的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 only working at page refresh?"的更多信息和类似的情景。

您的脚本期望的页面元素无疑会在load事件触发后出现。另外，从您的评论中，这听起来像整个页面的部分被AJAX换出，但AJAX足够礼貌地改变URL哈希。这意味着您需要发起hashchange事件。

在这种情况下请勿使用addEventListener ("load"...。与hashchange一起使用the waitForKeyElements() utility。

没有重构整个脚本使用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使用浏览器对象与远程服务器通信。这样做的一般用例是能够更新客户端的界面，而无需转到其他页面。在我们开始之前，请谨慎几句。不建议进行登录认证

阿贾克斯和张贴形成 用户可以关闭JavaScript，或者可以从运行的JavaScript限制，由于它建议您不要使用AJAX的IT策略

考虑到这一点这是关键用户功能的唯一解决方案！总是有一个后备！ 注意：此社区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!'); 
    } 
});