我想使用用户脚本在站点中加载另一个脚本文件。
但是,js.onload
事件无法正常工作。
用户脚本文件:
// ==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)
}
load.js文件:
var A = {
name:'aa'
}
在Chrome中,控制台输出“undefined”,但load.js已完全加载。
我在Firefox中对其进行了测试,它可以正确输出
A
。 最佳答案
切勿使用用户脚本中的.onload
,.onclick
等。 (在常规网页中,这也是较差的做法)。
原因是用户脚本在沙箱("isolated world")中运行,并且您无法在Chrome用户脚本或内容脚本中设置或使用页面范围的javascript对象。
始终使用addEventListener()
(或等效的库函数,例如jQuery .on()
)。另外,您应该在将load
节点添加到DOM之前设置<script>
监听器。
最后,如果您想访问页面范围内的变量(在这种情况下为A
),则必须这样做。 (或者,您可以切换到Tampermonkey并使用unsafeWindow
,但使用inject the code。)
使用类似:
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);
}
也许:
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.
}
... ...
关于javascript - 为什么script.onload在Chrome用户脚本中不起作用?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16805043/