将参数传递给JavaScript文件

Question

通常我会有一个我想要使用的JavaScript文件,需要在我的网页中定义某些变量.

所以代码是这样的:

<script type="text/javascript" src="file.js"></script>
<script type="text/javascript">
   var obj1 = "somevalue";
</script>

但我想做的是:

<script type="text/javascript" 
     src="file.js?obj1=somevalue&obj2=someothervalue"></script>

我尝试了不同的方法,最好的方法是解析查询字符串,如下所示:

var scriptSrc = document.getElementById("myscript").src.toLowerCase();

然后搜索我的价值观.

我想知道是否有另一种方法可以做到这一点,而无需构建一个解析我的字符串的函数.

你们都知道其他方法吗？

Answer 1

如果可能的话,我建议不要使用全局变量.使用命名空间和OOP将参数传递给对象.

此代码属于file.js:

var MYLIBRARY = MYLIBRARY || (function(){
    var _args = {}; // private

    return {
        init : function(Args) {
            _args = Args;
            // some other initialising
        },
        helloWorld : function() {
            alert('Hello World! -' + _args[0]);
        }
    };
}());

在你的html文件中:

<script type="text/javascript" src="file.js"></script>
<script type="text/javascript">
   MYLIBRARY.init(["somevalue", 1, "controlId"]);
   MYLIBRARY.helloWorld();
</script>

Answer 2

您可以传递具有任意属性的参数.这适用于所有最近的浏览器.

<script type="text/javascript" data-my_var_1="some_val_1" data-my_var_2="some_val_2" src="/js/somefile.js"></script>

在somefile.js中,您可以通过以下方式传递变量值:

........

var this_js_script = $('script[src*=somefile]'); // or better regexp to get the file name..

var my_var_1 = this_js_script.attr('data-my_var_1');   
if (typeof my_var_1 === "undefined" ) {
   var my_var_1 = 'some_default_value';
}
alert(my_var_1); // to view the variable value

var my_var_2 = this_js_script.attr('data-my_var_2');   
if (typeof my_var_2 === "undefined" ) {
   var my_var_2 = 'some_default_value';
}
alert(my_var_2); // to view the variable value

...等等...

Answer 3

我遇到的另一个想法是为元素分配一个"id"并将参数作为data-*属性传递.生成的标记看起来像这样:

<script id="helper" data-name="helper" src="helper.js"></script>

然后,脚本可以使用id以编程方式定位自己并解析参数.给定前一个标记,可以像这样检索名称:

var name = document.getElementById("helper").getAttribute("data-name");

我们得到name = helper

Answer 4

看看这个URL.它完全符合要求.

http://feather.elektrum.org/book/src.html

非常感谢作者.为了快速参考,我粘贴了以下主要逻辑:

var scripts = document.getElementsByTagName('script');
var myScript = scripts[ scripts.length - 1 ];

var queryString = myScript.src.replace(/^[^\?]+\??/,'');

var params = parseQuery( queryString );

function parseQuery ( query ) {
  var Params = new Object ();
  if ( ! query ) return Params; // return empty object
  var Pairs = query.split(/[;&]/);
  for ( var i = 0; i < Pairs.length; i++ ) {
    var KeyVal = Pairs[i].split('=');
    if ( ! KeyVal || KeyVal.length != 2 ) continue;
    var key = unescape( KeyVal[0] );
    var val = unescape( KeyVal[1] );
    val = val.replace(/\+/g, ' ');
    Params[key] = val;
  }
  return Params;
}

Answer 5

您使用全局变量:-D.

像这样:

<script type="text/javascript">
   var obj1 = "somevalue";
   var obj2 = "someothervalue";
</script>
<script type="text/javascript" src="file.js"></script">

在"file.js"的JavaScript代码可以访问obj1并obj2没有问题.

编辑只是想补充一点,如果"file.js"想要检查obj1和obj2甚至已经宣布你可以用下面的函数.

function IsDefined($Name) {
    return (window[$Name] != undefined);
}

希望这可以帮助.

Answer 6

这是一个非常匆忙的概念证明.

我敢肯定至少有两个地方可以改进,而且我也相信这不会在野外存活很久.任何反馈,使其更具代表性或可用性是值得欢迎的.

关键是为脚本元素设置一个id.唯一的问题是,这意味着您只能调用脚本一次,因为它会查找该ID以提取查询字符串.相反,如果脚本循环遍历所有查询元素以查看是否有任何查询元素指向它,如果是,则使用此类脚本元素的最后一个实例.无论如何,使用代码:

被称为脚本:

window.onload = function() {
//Notice that both possible parameters are pre-defined.
//Which is probably not required if using proper object notation
//in query string, or if variable-variables are possible in js.
var header;
var text;

//script gets the src attribute based on ID of page's script element:
var requestURL = document.getElementById("myScript").getAttribute("src");

//next use substring() to get querystring part of src
var queryString = requestURL.substring(requestURL.indexOf("?") + 1, requestURL.length);

//Next split the querystring into array
var params = queryString.split("&");

//Next loop through params
for(var i = 0; i < params.length; i++){
 var name  = params[i].substring(0,params[i].indexOf("="));
 var value = params[i].substring(params[i].indexOf("=") + 1, params[i].length);

    //Test if value is a number. If not, wrap value with quotes:
    if(isNaN(parseInt(value))) {
  params[i] = params[i].replace(value, "'" + value + "'");
 }

    // Finally, use eval to set values of pre-defined variables:
 eval(params[i]);
}

//Output to test that it worked:
document.getElementById("docTitle").innerHTML = header;
document.getElementById("docText").innerHTML = text;
};

脚本通过以下页面调用:

<script id="myScript" type="text/javascript" 
        src="test.js?header=Test Page&text=This Works"></script>

<h1 id="docTitle"></h1>
<p id="docText"></p>

Answer 7

可能很简单

例如

<script src="js/myscript.js?id=123"></script>
<script>
    var queryString = $("script[src*='js/myscript.js']").attr('src').split('?')[1];
</script>

然后,您可以将查询字符串转换为json,如下所示

var json = $.parseJSON('{"' 
            + queryString.replace(/&/g, '","').replace(/=/g, '":"') 
            + '"}');

然后可以使用喜欢

console.log(json.id);

Answer 8

HTML：

<script src='greet.js' data-param1='hello' data-param2='world'></script>

// greet.js:
const prm1=document.currentScript.dataset.param1;
const prm2=document.currentScript.dataset.param2;

Answer 9

如果你使用像jQuery这样的Javascript框架,这可以很容易地完成.像这样,

var x = $('script:first').attr('src'); //Fetch the source in the first script tag
var params = x.split('?')[1]; //Get the params

现在,您可以通过拆分作为变量参数来使用这些参数.

可以在没有任何框架的情况下完成相同的过程,但需要更多代码行.