获取当前js执行的脚本节点

  1. 方法一
  2. 方法二
  3. 方法三

方法一

原理:js加载会阻止后面的dom渲染,所以执行到某个script,后面的script和dom都还不存在
但是如果有async脚本就不行了(This won’t work for async scripts);

1
2
var scripts1 = document.getElementsByTagName("script"),
selfScript1 = scripts1[scripts1.length-1];

stackoverflow stackoverflow.

demo1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试获取当前js执行的脚本节点</title>
</head>
<body>
<script type="text/javascript">
window.attr1 = 'val1';
window.attr2 = 'val2';
window.attr3 = 'val3';
var scripts1 = document.getElementsByTagName("script"),
selfScript1 = scripts1[scripts1.length-1];
console.log(selfScript1);
</script>
<script type="text/javascript">
window.attr2 = 'val112';
var scripts2 = document.getElementsByTagName("script"),
selfScript2 = scripts2[scripts2.length-1];
console.log(selfScript2);
</script>
</body>
</html>

方法二

原理:html5的一个(https://developer.mozilla.org/zh-CN/docs/Web/API/Document/currentScript)新特性,不是所有的浏览器支持,
可以使用一个polyfill polyfill. 实现基本使用方法一来做的

1
document.currentScript

demo2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document.currentScript获取当前js执行的脚本节点</title>
</head>
<body>
<script type="text/javascript">
window.attr1 = 'val1';
window.attr2 = 'val2';
window.attr3 = 'val3';
console.log(document.currentScript);
</script>
<script type="text/javascript">
window.attr2 = 'val112';
console.log(document.currentScript);
</script>
</body>
</html>

方法三

原理:使用id,绝对定位,都懂的..

demo3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位-获取当前js执行的脚本节点</title>
</head>
<body>
<script type="text/javascript" id="test1">
window.attr1 = 'val1';
window.attr2 = 'val2';
window.attr3 = 'val3';
var script1 = document.getElementById('test1');
console.log(script1);
</script>
<script type="text/javascript" id="test2">
var script2 = document.getElementById('test2');
console.log(script2);
</script>
</body>
</html>

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 [email protected]

文章标题:获取当前js执行的脚本节点

本文作者:xuxihai123

发布时间:2021-05-06, 04:41:13

最后更新:2021-05-06, 04:41:13

原始链接:https://www.xuxihai.com/2021/05/06/get-current-script/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏