我正在创建一个使用 jQuery 的外部小部件,而不是让用户单独包含它,我想检查它是否已加载,如果没有则动态加载它。
问题是我需要等到它被加载才能执行脚本的其余部分,这需要 IE 和 FF/Chrome 以不同方式处理的事件处理程序。
如果我这样做,它在 IE8 中可以正常工作:
<div id="test">
<p>This is a test.</p>
</div>
<script>
if (typeof jQuery == 'undefined') {
s = document.createElement("script");
s.src = "//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";
if (s.addEventListener) {
s.addEventListener("load", runScript, false);
} else if (s.readyState) {
s.onreadystatechange = runScript;
}
} else {
runScript();
}
function runScript() {
document.getElementsByTagName('head')[0].appendChild(s);
$('#test').css('font-size', '50px');
}
</script>
但这在 Chrome 中不起作用。但是,如果我之前附加脚本,它可以在 Chrome 中运行,但不能在 IE 中运行:
<div id="test">
<p>This is a test.</p>
</div>
<script>
if (typeof jQuery == 'undefined') {
s = document.createElement("script");
s.src = "//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(s);
if (s.addEventListener) {
s.addEventListener("load", runScript, false);
} else if (s.readyState) {
s.onreadystatechange = runScript;
}
} else {
runScript();
}
function runScript() {
$('#test').css('font-size', '50px');
}
</script>
关于如何使用适用于 IE 和 Chrome 的事件处理程序动态加载 jQuery 的任何想法?
编辑:将 appendChild 目标从 test 更改为 head。