web-dev-qa-db-ja.com

JavaScriptファイルにパラメーターを渡す

多くの場合、特定の変数をWebページで定義する必要がある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();

そして、私の値を検索します。

文字列を解析する関数を構築せずにこれを行う別の方法があるのだろうか。

他の方法を知っていますか？

javascriptparameter-passing
139
RaduM

可能であれば、グローバル変数を使用しないことをお勧めします。名前空間と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>
183
Naeem Sarfraz

任意の属性を持つパラメーターを渡すことができます。これは、最近のすべてのブラウザーで機能します。

<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

...等...

63
Vlado

私が出会った別のアイデアは、要素に「id」を割り当て、data- *属性として引数を渡すことでした。結果のタグは次のようになります。

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

次に、スクリプトはidを使用してプログラムで自分自身を見つけ、引数を解析します。前のタグを指定すると、名前は次のように取得できます。

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

名前=ヘルパーを取得します

33
NewBuddy

この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;
}
18
user378221

これは非常に急いでいる概念実証です。

改善が可能な場所が少なくとも2つあると確信しています。また、これが野生で長く生き残れないことも確信しています。より見やすく、または使いやすくするためのフィードバックを歓迎します。

キーは、スクリプト要素のIDを設定することです。唯一の難点は、このIDを検索してクエリ文字列を取得するため、スクリプトを1回しか呼び出せないことを意味します。代わりに、スクリプトがすべてのクエリ要素をループして、それらのいずれかがそれを指すかどうかを確認し、そうであれば、そのようなスクリプト要素の最後のインスタンスを使用する場合、これを修正できます。とにかく、コードで：

呼び出されるスクリプト：

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>
12
Anthony

グローバル変数:-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);
}

お役に立てれば。

10
NawaMan

非常に簡単かもしれません

例えば

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

JQueryのようなJavascriptフレームワークを使用している場合、これは簡単に実行できます。そのようです、

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

これで、変数パラメーターとして分割することにより、これらのパラメーターを使用できます。

フレームワークがなくても同じプロセスを実行できますが、さらにコードが必要になります。

6
GeekTantra

素敵な質問と創造的な答えですが、私の提案は、メソッドをパラメータ化することであり、それはトリックなしですべての問題を解決するはずです。

機能がある場合：

function A()
{
    var val = external_value_from_query_string_or_global_param;
}

これを次のように変更できます。

function B(function_param)
{
    var val = function_param;
}

これは最も自然なアプローチだと思います。「ファイルパラメータ」に関する追加のドキュメントを作成する必要はなく、同じものを受け取ります。これは、他の開発者がjsファイルを使用できるようにする場合に特に便利です。

1
dzida

さて、javascriptファイルをスクリプト言語のいずれかで作成し、リクエストごとにファイルに変数を注入することができます。 js-filesを静的に配布しないようにWebサーバーに指示する必要があります（mod_rewriteを使用すれば十分です）。

ただし、これらのjsファイルは常に変更されているため、これらのjsファイルのキャッシュは失われることに注意してください。

またね.

1
aefxx

それは有効なHTMLではありません（私は思いません）が、 webページでスクリプトタグのカスタム属性を作成した場合に機能する：

<script id="myScript" myCustomAttribute="some value" ....>

次に、javascriptのカスタム属性にアクセスします。

var myVar = document.getElementById( "myScript" ).getAttribute( "myCustomAttribute" );

スクリプトのソース文字列を解析するよりも良いか悪いかはわかりません。

0
Cor

いいえ、JSファイルURLのクエリ文字列部分に変数を追加して、これを実際に行うことはできません。わずらわしい文字列を解析するコードの部分を書く場合、おそらく別の方法は、変数をjsonエンコードして、タグのrel属性のようなものに入れることでしょうか？あなたが非常に心配しているものである場合、これがHTML検証の観点からどの程度有効かはわかりません。次に、スクリプトのrel属性を見つけてjson_decodeするだけです。

例えば

<script type='text/javascript' src='file.js' rel='{"myvar":"somevalue","anothervar":"anothervalue"}'></script>
0
Dal Hundal