275 javascript element parent
如何引用加载当前运行的javascript的脚本元素？
这是情况.我在页面中加载了一个"主"脚本,首先是在HEAD标记下.
<!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>
bri*_*ice 602
document.currentScriptdocument.currentScript将返回<script>其脚本当前正在处理的元素.
<script>
var me = document.currentScript;
</script>
defer&async)为脚本提供id属性将允许您在使用中通过id轻松选择它<script type="module">.
<script id="myscript">
var me = document.getElementById('myscript');
</script>
document.getElementById()&defer)async 对于某些边缘情况,属性可能会在某些浏览器中导致脚本的奇怪行为id属性选择脚本为脚本提供data-*属性将允许您从内部轻松选择它.
<script data-name="myscript">
var me = document.querySelector('script[data-name="myscript"]');
</script>
这比以前的选项几乎没有什么好处.
data-*&defer)async并不适用于所有浏览器querySelector()属性id与<script>边缘情况.您可以使用选择器按源选择脚本,而不是使用数据属性:
<script src="//example.com/embed.js"></script>
在embed.js中:
var me = document.querySelector('script[src="//example.com/embed.js"]');
id&defer)async属性我们还可以遍历每个脚本元素并单独检查每个脚本元素以选择我们想要的那个:
<script>
var me = null;
var scripts = document.getElementsByTagName("script")
for (var i = 0; i < scripts.length; ++i) {
if( isMe(scripts[i])){
me = scripts[i];
}
}
</script>
这使我们可以在不支持id属性的旧浏览器中使用以前的技术.例如:
function isMe(scriptElem){
return scriptElem.getAttribute('src') === "//example.com/embed.js";
}
这继承了所采取的任何方法的好处和问题,但不依赖querySelector()于此将在旧版浏览器中工作.
由于脚本是按顺序执行的,因此最后一个脚本元素通常是当前运行的脚本:
<script>
var scripts = document.getElementsByTagName( 'script' );
var me = scripts[ scripts.length - 1 ];
</script>
querySelector()&defer)Cof*_*ite 85
由于脚本是按顺序执行的,因此当前执行的脚本标记始终是页面上的最后一个脚本标记.因此,要获取脚本标记,您可以执行以下操作:
var scripts = document.getElementsByTagName( 'script' );
var thisScriptTag = scripts[ scripts.length - 1 ];
Gre*_*reg 11
可能最简单的方法是给你的scrip标签一个id属性.
小智 10
仅当脚本没有"延迟"或"异步"属性时,才会按顺序执行脚本.知道脚本标记的一个可能的ID/SRC/TITLE属性也可以在这些情况下工作.所以格雷格和贾斯汀的建议都是正确的.
document.currentScript关于WHATWG清单的提案已经提出.
编辑:Firefox> 4已经实现了这个非常有用的属性,但它在IE11中不可用,最后我检查过,仅在Chrome 29和Safari 8中可用.
编辑:没有人提到"document.scripts"集合,但我相信以下可能是一个很好的跨浏览器替代方案来获取当前正在运行的脚本:
var me = document.scripts[document.scripts.length -1];
小智 9
这里有一些polyfill,document.CurrentScript如果它存在则会利用它并回退到通过ID查找脚本.
<script id="uniqueScriptId">
(function () {
var thisScript = document.CurrentScript || document.getElementByID('uniqueScriptId');
// your code referencing thisScript here
());
</script>
如果将其包含在每个脚本标记的顶部,我相信您将能够始终知道正在触发哪个脚本标记,并且您还能够在异步回调的上下文中引用脚本标记.
未经测试,如果您尝试,请留下反馈给其他人.
小智 6
它必须在页面加载时以及使用javascript添加脚本标记时(例如,使用ajax)
<script id="currentScript">
var $this = document.getElementById("currentScript");
$this.setAttribute("id","");
//...
</script>
小智 6
要获取当前加载的脚本，您可以使用脚本
var thisScript = document.currentScript;
您需要在脚本的开头保留引用，以便稍后调用
var url = thisScript.src
处理异步和延迟脚本的一种方法是利用 onload 处理程序 - 为所有脚本标记设置一个 onload 处理程序，第一个执行的应该是您的。
function getCurrentScript(callback) {
if (document.currentScript) {
callback(document.currentScript);
return;
}
var scripts = document.scripts;
function onLoad() {
for (var i = 0; i < scripts.length; ++i) {
scripts[i].removeEventListener('load', onLoad, false);
}
callback(event.target);
}
for (var i = 0; i < scripts.length; ++i) {
scripts[i].addEventListener('load', onLoad, false);
}
}
getCurrentScript(function(currentScript) {
window.console.log(currentScript.src);
});
| 归档时间： |
|
| 查看次数： |
128156 次 |
| 最近记录： |