如何引用加载当前运行的javascript的脚本元素?
情况是这样的。我有一个“主”脚本被加载在页面的高,第一件事下的头标签。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="scripts.js"></script>
在“scripts.js”中有一个脚本,需要能够按需加载其他脚本。正常的方法不太适合我,因为我需要添加新的脚本而不引用HEAD标记,因为HEAD元素还没有完成渲染:
document.getElementsByTagName('head')[0].appendChild(v);
我要做的是引用加载当前脚本的脚本元素,这样我就可以在它之后将新的动态加载的脚本标记追加到DOM中。
<script type="text/javascript" src="scripts.js"></script>
loaded by scripts.js--><script type="text/javascript" src="new_script1.js"></script>
loaded by scripts.js --><script type="text/javascript" src="new_script2.js"></script>
遵循以下简单步骤获取当前正在执行的脚本块的引用:
在脚本块中放入一些随机的唯一字符串(在每个脚本块中必须是唯一的/不同的)
document.getElementsByTagName('script')的迭代结果,从每个内容中查找唯一的字符串(从innerText/textContent属性获得)。
示例(ABCDE345678是唯一的ID):
<script type="text/javascript">
var A=document.getElementsByTagName('script'),i=count(A),thi$;
for(;i;thi$=A[--i])
if((thi$.innerText||thi$.textContent).indexOf('ABCDE345678'))break;
// Now thi$ is refer to current script block
</script>
顺便说一句,对于你的情况,你可以简单地使用老式的document.write()方法来包含另一个脚本。
正如你提到的DOM还没有被呈现,你可以利用浏览器总是以线性顺序执行脚本的事实(除了延迟的脚本将在以后呈现),所以你的文档的其余部分仍然是“不存在”的。
通过document.write()编写的任何内容都将放在调用者脚本之后。
原始HTML页面示例:
<!doctype html>
<html><head>
<script src="script.js"></script>
<script src="otherscript.js"></script>
<body>anything</body></html>
script.js的内容:
document.write('<script src="inserted.js"></script>');
渲染后,DOM结构将变成:
HEAD
SCRIPT script.js
SCRIPT inserted.js
SCRIPT otherscript.js
BODY
我用这个通常的eval替代方法动态地插入脚本标记,并在添加到DOM之前简单地设置一个全局属性currentComponentScript。
const old = el.querySelector("script")[0];
const replacement = document.createElement("script");
replacement.setAttribute("type", "module");
replacement.appendChild(document.createTextNode(old.innerHTML));
window.currentComponentScript = replacement;
old.replaceWith(replacement);
但在循环中不能工作。DOM直到下一个宏任务才运行脚本,因此其中的一批脚本只能看到最后一个值集。你必须setTimeout整个段落,然后在前一段结束后setTimeout下一段。例如,将setTimeout链接起来,而不是在循环中在一行中多次调用setTimeout。