在前端开发中,有时候我们需要获取当前页面上某个脚本引用的URL地址,以便进行相关操作。本文将介绍几种获取被调用脚本URL的方法,并提供示例代码和指导意义。
方法一:document.currentScript
document.currentScript
属性返回当前正在执行的 <script>
元素。因此,在 <script>
标签中使用 document.currentScript.src
就可以获取当前脚本的 URL。
---- ------ --- ------- --------------------------------------------------
-- ----------- ----- --------- - --------------------------- ----------------------- -- ------------------------------------
需要注意的是,当脚本是通过 defer
或 async
属性加载时,document.currentScript
可能会返回 null
,因为此时脚本尚未完成加载和执行。
方法二:DOM 循环查找
另一个获取被调用脚本 URL 的方法是遍历整个 DOM 树,查找所有 <script>
元素,并找到当前正在执行的脚本元素。
---- ------ --- ------- --------------------------------------------------
-- ----------- -------- --------------- - ----- ------- - ---------------------------------------- --- ---- - - -- - - --------------- ---- - ----- ------ - ----------- -- ----------- -- ----------------- --- -------------- - ------ ----------- - - - ----- --------- - ---------------- ----------------------- -- ------------------------------------
上述代码中,我们通过 getElementsByTagName
方法获取所有 <script>
元素,并循环遍历。对于每个脚本元素,我们检查其 src
属性是否存在,并且它的 readyState
是否为 'interactive'
。如果满足这两个条件,则表示当前正在执行的脚本就是我们想要找的脚本,可以返回其 src
值。
方法三:使用 Error 对象
还有一种方法是利用 Error
对象来获取被调用脚本的 URL。当 JavaScript 引擎解释执行一个脚本时,会创建一个 Error
对象并将其抛出。该对象包含了一些关于错误的信息,其中一个重要的属性是 stack
,它包含了当前执行上下文的堆栈信息。
---- ------ --- ------- --------------------------------------------------
-- -- ----- ------------- -------- -------------- - --- - ----- --- -------- - -------- - ----- ----- - ------- -- ----------- -- ------------- ----- --- - --------------- ----------- ------ -------------------- ---- - - ----- --------- - --------------- ----------------------- -- ------------------------------------
上述代码中,我们通过 throw new Error()
来创建一个 Error
对象,并捕获堆栈信息。然后,我们利用正则表达式和字符串操作将堆栈信息中的 URL 提取出来。
需要注意的是,这种方法比较 hacky,而且可能会因为不同浏览器或引擎的实现而不同。在某些情况下,可能无法获取正确的 URL。
总结
以上是三种常用的获取被调用脚本 URL 的方法,它们各有优缺点,可根据具体情况选择合适的方法。需要注意
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/14277