摘要:如果支持,直接从获取当前脚本运行的地址如果不支持则遍历文档所有的标签,判断哪个标签的为,则说明此标签的属性为当前脚本运行的地址。需要的注意的是只有支持,和均不支持。
起因
在阅读layUI的源代码关于加载远程脚本的代码中出现了判断当前js脚本地址的代码,其中出现了对于document.currentScript支持与不支持时,会走不同的逻辑。
如果支持document.currentScript,直接从document.currentScript.src获取当前脚本运行的地址;
如果不支持document.currentScript,则遍历文档所有的标签,判断哪个标签的readyState为"interactive",则说明此标签的src属性为当前脚本运行的地址。
//获取layui所在目录 getPath = function () { var jsPath = doc.currentScript ? doc.currentScript.src : function () { var js = doc.scripts , last = js.length - 1 , src; for (var i = last;i > 0;i--) { if (js[i].readyState === "interactive") { src = js[i].src; break; } } return src || js[last].src; }(); return jsPath.substring(0, jsPath.lastIndexOf("/") + 1); }()为什么要进行这种判断?
首先让我们看一下Document.currentScript的浏览器支持情况,具体如下图:
由图可见IE浏览器在Document.currentScript的支持上全线阵亡,那在IE浏览器上如何获取当前脚本的地址呢?原来IE的标签对象支持一个readyState的属性,其属性值与Document.readyState一样,loading表示正在加载,interactive表示当前处于互动状态(也就是正在运行),complete表示脚本已经加载完成。我们可以利用readyState是否为interactive来判断某个标签为当前运行代码所在的位置。
需要的注意的是HTMLScriptElement.prototype.readyState只有IE支持,Chrome和Firefox均不支持。
根据上述原理,对于Document.currentScript的polyfill实现,其实就是基于HTMLScriptElement.prototype.readyState来实现的,具体可阅读https://github.com/JamesMGree... 的具体实现。
相关文档Document.currentScript: https://developer.mozilla.org...
Document.readyState: https://developer.mozilla.org...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/99716.html
摘要:如果支持,直接从获取当前脚本运行的地址如果不支持则遍历文档所有的标签,判断哪个标签的为,则说明此标签的属性为当前脚本运行的地址。需要的注意的是只有支持,和均不支持。 起因 在阅读layUI的源代码关于加载远程脚本的代码中出现了判断当前js脚本地址的代码,其中出现了对于document.currentScript支持与不支持时,会走不同的逻辑。如果支持document.currentSc...
摘要:相关最大的特性就在于直接操纵网页上的节点,从而实现网页的局部刷新而非全局刷新。该回调函数会在送回响应的时候被调用。当然了,如果浏览器不支持对象,会返回,在这时需要进行额外的处理。 前言 马上就要参加一个团队项目进行React的前端开发了。最近正在着手熟练React语法,然后发现本质上还是建立在对javascript的深刻理解上。市面上在js基础上封装出了非常多优秀的车轮,其中最被新手广...
摘要:本文简单介绍与安全相同的响应头部,内容整理自。参数参数说明指定的时间秒范围内浏览器总是使用来访问可选参数,是否同时应用于当前域名的所有子域名示例是一种防止网站被攻击者使用错误发布或其他欺诈性证书冒充安全证书的安全机制。 本文简单介绍与安全相同的 HTTP 响应头部,内容整理自《OWASP Secure Headers Project》。 HTTP Strict Transport Se...
摘要:优化需要一个多维的方法。的规范允许省略属性组中的最后一个分号。省略提高性能的一个简单方法是使用标准的一个特性。在运行它如果你希望将产品集成到中,请访问。维护不良的存储库包含一组包装器文件和。 showImg(https://segmentfault.com/img/bVbpTsK?w=970&h=545); 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你! 这是 W...
摘要:优化需要一个多维的方法。的规范允许省略属性组中的最后一个分号。省略提高性能的一个简单方法是使用标准的一个特性。在运行它如果你希望将产品集成到中,请访问。维护不良的存储库包含一组包装器文件和。 showImg(https://segmentfault.com/img/bVbpTsK?w=970&h=545); 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你! 这是 W...
阅读 2042·2021-11-23 09:51
阅读 2187·2021-09-29 09:34
阅读 3647·2021-09-22 15:50
阅读 3537·2021-09-22 15:23
阅读 2500·2019-08-30 15:55
阅读 680·2019-08-30 15:53
阅读 3045·2019-08-29 17:09
阅读 2598·2019-08-29 13:57