js获取script参数

转载请注明出处WangYuheng’s Blog

问题描述

js插件挡住了页面元素,希望自定义js插件显示的布局位置。

code

<script>引入js插件时传递layout布局参数。

1. 通过url参数方式获取

js可以获取url中的参数

1
2
3
4
5
6
7
8
9
if(location.href.indexOf("?")>-1) {
var params = location.href.substr(location.href.indexOf("?")+1).split("&");
for (var i=0;i<params.length;i++){
var kv = params[i].split("=");
var key = kv[0];
var value = kv[1];
console.log("key="+key+" value="+value);
}
}

同理,可以先获取script标签中的src属性,再通过上面的方法,获取layout参数

1
<script src="listen.js?layout=right"></script>

在js插件文件中通过如下代码获取

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var layout="right";
var scripts = document.getElementsByTagName("script");
for (var i=0; i< scripts.length;i++) {
var script = scripts[i];
if (script && script.getAttribute("src") && script.getAttribute("src").indexOf("listen.js")>-1) {
var url = script.getAttribute("src");
var params = url.substr(url.indexOf("?")+1).split("&");
for (var i=0;i<params.length;i++){
var kv = params[i].split("=");
var key = kv[0];
var value = kv[1];
if("layout" == key) {
layout = value;
}
}
}

}
console.log(layout);

2. 通过自定义属性获取

通过上面的方法,可以想到既然能获取src属性,那么也可以自定义布局属性,并通过getAttribute()方法获取。

1
<script src="listen.js" layout="right"></script>

在js插件文件中通过如下代码获取

1
2
3
4
5
6
7
8
9
var layout="right";
var scripts = document.getElementsByTagName("script");
for (var i=0; i< scripts.length;i++) {
var script = scripts[i];
if (script && script.getAttribute("src") && script.getAttribute("src").indexOf("listen.js")>-1 && script.getAttribute("layout")) {
layout = script.getAttribute("layout");
}
}
console.log(layout);

结论

通过从代码上来看,第二种方法更简单,而问过几个朋友,都更喜欢第二种配置方式,所以在这里推荐使用自定义属性获取属性。

1
2
<script src="listen.js?layout=right"></script>
<script src="listen.js" layout="right"></script>

Welcome to my other publishing channels