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

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

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

あなたはみんな他の方法を知っていますか？

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

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

<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

...等...

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

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

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

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

得るname=helper

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

グローバル変数:-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問題なし。

EDITだけでは、「file.js」のかどうかを確認したい場合ことを追加したいobj1とobj2も、あなたは、次の機能を使用することができます宣言されています。

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

お役に立てれば。

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

改善の余地がある場所は少なくとも2つあると確信しています。また、これが実際に長く存続しないことも確信しています。より見やすく、使いやすくするためのフィードバックは大歓迎です。

重要なのは、スクリプト要素の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>

とても簡単かもしれません

例えば

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

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

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

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

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

まあ、どのスクリプト言語でもjavascriptファイルを作成して、すべてのリクエストで変数をファイルに挿入することもできます。jsファイルを静的に提供しないようにWebサーバーに指示する必要があります（mod_rewriteを使用すれば十分です）。

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

さようなら。

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

機能がある場合：

function A()
{
    var val = external_value_from_query_string_or_global_param;
}

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

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

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

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

例えば

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

これは有効なHTMLではありませんが（私はそうは思いません）、Webページでスクリプトタグのカスタム属性を作成すると機能するようです。

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

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

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

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

CSPチェックに合格する方法（安全でないインラインを禁止する）が必要な場合は、nonceメソッドを使用して、スクリプトとCSPディレクティブの両方に一意の値を追加するか、値をhtmlに書き込んで再度読み取る必要があります。

express.jsのノンスメソッド：

const uuidv4 = require('uuid/v4')

app.use(function (req, res, next) {
  res.locals.nonce = uuidv4()
  next()
})

app.use(csp({
  directives: {
    scriptSrc: [
      "'self'",
      (req, res) => `'nonce-${res.locals.nonce}'`  // 'nonce-614d9122-d5b0-4760-aecf-3a5d17cf0ac9'
    ]
  }
}))

app.use(function (req, res) {
  res.end(`<script nonce="${res.locals.nonce}">alert(1 + 1);</script>`)
})

または、htmlメソッドに値を書き込みます。この場合、Jqueryを使用します。

<div id="account" data-email="{{user.email}}"></div>
...


$(document).ready(() => {
    globalThis.EMAIL = $('#account').data('email');
}