189

多くの場合、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();

そして、自分の価値観を探します。

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

皆さんは他の方法を知っていますか？

4

17 に答える 17

226

可能であれば、グローバル変数を使用しないことをお勧めします。名前空間と 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>
于 2010-02-03T09:33:20.760 に答える
92

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

<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

...等...

于 2013-02-25T14:28:40.963 に答える
20

この 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;
}
于 2010-06-28T16:28:55.470 に答える
17

グローバル変数を使用します:-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);
}

お役に立てれば。

于 2010-02-03T09:19:10.270 に答える
12

これは非常に急いで概念実証されたものです。

改善できる場所は少なくとも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>
于 2010-02-03T11:15:59.097 に答える
9

とてもシンプルかもしれません

例えば

<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);
于 2016-03-01T11:27:48.423 に答える
6

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

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

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

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

于 2010-02-03T09:20:05.620 に答える
2

そうですね、JavaScriptファイルを任意のスクリプト言語で作成して、リクエストごとに変数をファイルに挿入することができます。jsファイルを静的にディッシュしないようにWebサーバーに指示する必要があります（mod_rewriteを使用するだけで十分です）。

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

さよなら。

于 2010-02-03T09:21:51.637 に答える
1

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

機能がある場合：

function A()
{
    var val = external_value_from_query_string_or_global_param;
}

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

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

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

于 2010-06-28T16:53:50.080 に答える
0

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

例えば

<script type='text/javascript' src='file.js' rel='{"myvar":"somevalue","anothervar":"anothervalue"}'></script>
于 2010-02-03T09:25:11.617 に答える