为什么script.onload在Chrome用户脚本中不起作用？ [英] Why is script.onload not working in a Chrome userscript?

问题描述

我想使用userscript在站点中加载另一个脚本文件。
但是， js.onload 事件无法正常工作。

userscript文件

  // == UserScript == 
 // @name代码突出显示
 // @description测试
 // @include http：// localhost / * 
 // @version 1.0 
 // == / UserScript == 
 
 var js = document.createElement（ '脚本'）; 
 js.src =http：//localhost/test/js/load.js; 
 document.getElementsByTagName（head）[0] .appendChild（js）; 
 js.onload = function（）{
 console.log（A）
} 
  

$

 b $ b} 
  

在Chrome中，控制台输出未定义但是load.js已经完全加载了。

我在Firefox中测试了它，它正确输出 A 。

解决方案

切勿使用 .onload ， .onclick 等等。

（这在常规网页中也是不好的做法）。

是userscripts在沙箱中运行（孤立的世界），并且您无法在页面范围内设置或使用JavaScript对象Chrome用户脚本或内容脚本。

始终使用 addEventListener（）（或者一个等效的库函数，如jQuery .on （））。另外，在将< script> 节点添加到DOM之前，您应该设置 load 侦听器。

$ b

最后，如果您希望访问页面范围中的变量（在这种情况下 A ），您必须注入代码。 （或者你可以切换到Tampermonkey并使用 unsafeWindow ，但 Chrome 27导致了这个问题。）

使用类似于：

  addJS_Node（null，http：//localhost/test/js/load.js，null，fireAfterLoad）; 
 
函数fireAfterLoad（）{
 addJS_Node（console.log（A）;）; 
} 
 
 //  -  addJS_Node是一个标准（ish）函数
函数addJS_Node（text，s_URL，funcToRun，runOnLoad）{
 var D = document; 
 var scriptNode = D.createElement（'script'）; 
 if（runOnLoad）{
 scriptNode.addEventListener（load，runOnLoad，false）; 
} 
 scriptNode.type =text / javascript; 
 if（text）scriptNode.textContent = text; 
 if（s_URL）scriptNode.src = s_URL; 
 if（funcToRun）scriptNode.textContent ='（'+ funcToRun.toString（）+'）（）'; 
 
 var targ = D.getElementsByTagName（'head'）[0] || D.body || D.documentElement; 
 targ.appendChild（scriptNode）; 
} 
  

或者：

  addJS_Node（null，http：//localhost/test/js/load.js，null，fireAfterLoad）; 
 
函数fireAfterLoad（）{
 addJS_Node（null，null，myCodeThatUsesPageJS）; 
 
 
函数myCodeThatUsesPageJS（）{
 console.log（A）; 
 // ---再加上，在这里。 
} 
 
 ... ... 
  

I want to load another script file, in a site, using a userscript. But, the js.onload event doesn't work correctly.

The userscript file:

// ==UserScript==
// @name           Code highlight
// @description    Test
// @include        http://localhost/*
// @version        1.0
// ==/UserScript==

var js = document.createElement('script');
    js.src = "http://localhost/test/js/load.js";
    document.getElementsByTagName("head")[0].appendChild(js);
    js.onload = function(){
        console.log(A)
    }

the load.js file:

var A = {
    name:'aa'
}

In Chrome, the console outputs "undefined", but the load.js has loaded completely.

I tested it in Firefox, and it outputs A correctly.

解决方案

Never use .onload, .onclick, etc. from a userscript. (It's also poor practice in a regular web page).

The reason is that userscripts operate in a sandbox ("isolated world"), and you cannot set or use page-scope javascript objects in a Chrome userscript or content-script.

Always use addEventListener() (or an equivalent library function, like jQuery .on()). Also, you should set load listeners before adding <script> nodes to the DOM.

Finally, if you wish to access variables in the page scope (A in this case), you must inject the code that does so. (Or you could switch to Tampermonkey and use unsafeWindow, but Chrome 27 is causing problems with that.)

Use something like:

addJS_Node (null, "http://localhost/test/js/load.js", null, fireAfterLoad);

function fireAfterLoad () {
    addJS_Node ("console.log (A);");
}

//-- addJS_Node is a standard(ish) function
function addJS_Node (text, s_URL, funcToRun, runOnLoad) {
    var D                                   = document;
    var scriptNode                          = D.createElement ('script');
    if (runOnLoad) {
        scriptNode.addEventListener ("load", runOnLoad, false);
    }
    scriptNode.type                         = "text/javascript";
    if (text)       scriptNode.textContent  = text;
    if (s_URL)      scriptNode.src          = s_URL;
    if (funcToRun)  scriptNode.textContent  = '(' + funcToRun.toString() + ')()';

    var targ = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
    targ.appendChild (scriptNode);
}

Or perhaps:

addJS_Node (null, "http://localhost/test/js/load.js", null, fireAfterLoad);

function fireAfterLoad () {
    addJS_Node (null, null, myCodeThatUsesPageJS);
}

function myCodeThatUsesPageJS () {
    console.log (A);
    //--- PLUS WHATEVER, HERE.
}

... ...

这篇关于为什么script.onload在Chrome用户脚本中不起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！