js获取script参数

转载请注明出处WangYuheng's Blog

问题描述

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

code

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

1. 通过url参数方式获取

js可以获取url中的参数

    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参数

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

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

    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()方法获取。

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

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

    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);

结论

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

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