编程小贴士

给你的编程提供小点子


取得当前script元素的src(path)

在正常情况下,无defer或async等属性干扰的情况下要准确取得当前script的执行路径
1. MDC里有介绍document.currentScript =》 https://developer.mozilla.org/en-US/docs/DOM/document.currentScript
还能看是否是异步加载还是阻塞加载,确实比较人性化。
2. 在IE下的表现比较出乎我的意料,最后来说明。

没测opera,拍脑袋想应该是支持的吧。

<script type=”text/javascript”>
function getCurrentScriptPath() {
//firefox可以直接得到currentScript
if (document.hasOwnProperty(‘currentScript’)) {
return document.currentScript.src;
}
var scripts = document.scripts || document.getElementsByTagName(‘script’),
len = scripts.length,
state = ‘interactive';
//兼容IE
for (var i=0; i <len; i++) {
if (scripts[i].readyState==state) {
return scripts[i].src;
}
}
//webkit
return scripts[len-1].src;
}
</script>


关于第二个问题吧,网上有_franky同学写的一篇文章讲script readyState问题。
无奈,他怎么每篇blog都写这么多字啊,看得我心急火撩的,写完这笔记再好好看下他写的文章,下次有机会见面也一定和他好好讨论一下这个blog字数的问题。

回到正题,其实就是想说,IE下的script src的方式不一定是“阻塞”的。场景如下:
page.html里引入一个外链的script,a.js
a.js里的代码也是外链两个script,a.a.js与a.b.js。这里的引入办法是用document.write来引入。
a.js代码:

document.write(‘<script src=”a.a.js”><\/script>’);
document.write(‘<script src=”a.b.js”><\/script>’);


此时,我们把所有信息简化成(IE6~IE10)
1. 我们在a.a.js里去看看所有script的readyState的话,是:
a.js — complete
a.a.js — interactive
a.b.js — loaded
2.
a.a.js代码:

var scripts = document.getElementsByTagName(‘script’);
document.title = script[script.length-1].src;
//如果是a.a.js理解起来还很容易 – script阻塞加载嘛
//此时这里IE输出是a.b.js,其他浏览器是a.a.js。


上述的结论告诉我们,其实IE里已经加载了a.js, a.a.js, a.b.js了!
理论知识告诉我们。
a.js是complete可以理解
a.a.js也可以理解
a.b.js是loaded就 不能理解了,谁说script src是阻塞。。。
马后炮的解释也不是不可以 —- 他是IE,就是下载了是下载了,但是还是阻塞运行。

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>