js获取script参数

Posted on Edited on In

转载请注明出处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>