取得当前脚本元素的路径的一个特例

在正常情况下,无 defer 或 async 属性要准确取得当前脚本执行路径,在不同浏览器里有两种办法:

  1. MDC 里可查看到用 document.currentScript 拿到当前运用的 script 路径。除此属性外还可通过它的子属性 「 document.currentScript.async 」 来查看「异步」还是「同步」加载。
  2. 用 document.scripts 得到最后一个 script.src ,但需注意 readyState 是否为 「 interactive 」状态。

简单实现代码如下:

	 
	function getCurrentScriptPath() {
		 //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;
	}	

最近在开发中遇到一个 readyState 在 IE 下的特例:

  • page.html 里引入一个外链的脚本 a.js 。
  • a.js 里有两个外链脚本: a.a.js 和 a.b.js 。「注:这是用 document.write 来引入脚本。」

page.html 代码:

<html>
<head></head>
<body>
    <script src="a.js"></script>
</body>
</html>

a.js 代码:

document.write('<script src="a.a.js"><\/script>');
document.write('<script src="a.b.js"><\/script>');

在浏览器 IE6 至 IE10 里:

我们在 a.a.js 里将所有脚本元素打印出 readyState :

  • a.js -- complete
  • a.a.js -- interactive
  • a.b.js -- loaded

上述的 log 告诉我们,从 readyState 状态上看:
其实 IE 里已经加载了 a.js, a.a.js, a.b.js 了。

Comments