假设脚本运行时文档中的最后一个脚本元素*是当前运行的脚本是否安全?
例如,我想创建一个脚本,可以将其放在页面主体的任何位置,并在同一个地方显示一个元素.我正在做这样的事情:
function getCurrentScriptElement() { var scripts = document.getElementsByTagName('script'); return scripts[scripts.length - 1]; } var script = getCurrentScriptElement(); var view = document.createElement('span'); /* Put stuff in our view... */ script.parentNode.insertBefore(view,script);
假设脚本在文档正文中,这是“安全吗?” getCurrentScriptElement函数是否总是返回正在运行的脚本?如果没有,怎么办呢?
我想这样做而不将脚本绑定到特定的id属性或类似,我希望它只是位置.
我在this script中创建了一个示例here.一个答案表明其他脚本可能会创建一个条件,这样的例子会破坏.是否可以在此示例中添加其他脚本来破坏它?
有人建议使用defer或async属性的其他脚本可能会破坏这一点.任何人都可以举例说明这样的脚本可能如何工作?
据我了解,defer意味着首先加载DOM,然后使用defer标签运行脚本.如何在另一个脚本元素上出现的defer属性会影响getCurrentScriptElement的行为?
async,正如我所理解的那样,意味着开始获取该脚本并同时保持解析DOM,不要等待……但是当它到达我的脚本时它应该仍然停止并等待,对吧?
我不知道任何一个人如何影响它,任何人都可以提供一个例子吗?
*出于此问题的目的,我只对外部脚本感兴趣.
**不是整个文档中的最后一个脚本元素,而是运行时文档中的最后一个脚本元素.文档的其余部分不应该加载,对吧?
解决方法
这不是绝对的保证.看看这个JSFiddle:
http://jsfiddle.net/jAsek/
<!DOCTYPE html> <title>Test case</title> <div> <p>At the start</p> <script id="first"> var scr1 = document.createElement("script"); scr1.setAttribute("id","early"); document.body.appendChild(scr1); </script> <p>After the first script</p> <script id="second"> function getCurrentScriptElement() { var scripts = document.getElementsByTagName('script'); return scripts[scripts.length - 1]; } alert(getCurrentScriptElement().id); </script> <p>At the end</p> </div>
这里警报报告“早期”注入脚本的id,而不是当前运行脚本“second”的id.
内部和外部脚本之间没有实际区别.