Melewati parameter ke file JavaScript

Seringkali saya akan memiliki file JavaScript yang ingin saya gunakan yang mengharuskan variabel tertentu didefinisikan di halaman web saya.

Jadi kodenya adalah seperti ini:

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

Tapi yang ingin saya lakukan adalah:

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

Saya mencoba berbagai metode dan yang terbaik adalah mengurai string kueri seperti ini:

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

Dan kemudian mencari nilai-nilai saya.

Saya bertanya-tanya apakah ada cara lain untuk melakukan ini tanpa membangun fungsi untuk mengurai string saya.

Apakah Anda semua tahu metode lain?

Saya akan merekomendasikan tidak menggunakan variabel global jika memungkinkan. Gunakan namespace dan OOP untuk meneruskan argumen Anda ke suatu objek.

Kode ini milik 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]);
        }
    };
}());

Dan di file html Anda:

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

Anda dapat melewatkan parameter dengan atribut arbitrer. Ini berfungsi di semua browser terbaru.

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

Di dalam somefile.js Anda bisa melewati nilai variabel dengan cara ini:

........

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

... dll ...

Ide lain saya datang di menugaskan sebuah idke <script>elemen dan melewati argumen sebagai data-*atribut. <script>Tag yang dihasilkan akan terlihat seperti ini:

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

Script kemudian dapat menggunakan id untuk menemukan dan mem-parsing argumen secara terprogram. Diberi <script>tag sebelumnya , namanya dapat diambil seperti ini:

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

Kami mendapatkan name=helper

Lihatlah URL ini. Ini berfungsi dengan baik untuk kebutuhan.

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

Terima kasih banyak kepada penulis. Untuk referensi cepat saya tempelkan logika utama di bawah ini:

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

Anda menggunakan variabel Global :-D.

Seperti ini:

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

Kode JavaScript di 'file.js' dapat mengakses obj1dan obj2tanpa masalah.

EDIT Hanya ingin menambahkan bahwa jika 'file.js' ingin memeriksa apakah obj1dan obj2bahkan telah dinyatakan, Anda dapat menggunakan fungsi berikut.

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

Semoga ini membantu.

Inilah bukti konsep yang sangat terburu-buru.

Saya yakin setidaknya ada 2 tempat di mana ada perbaikan, dan saya juga yakin bahwa ini tidak akan bertahan lama di alam liar. Setiap umpan balik untuk membuatnya lebih rapi atau dapat digunakan dipersilahkan.

Kuncinya adalah mengatur id untuk elemen skrip Anda. Satu-satunya tangkapan adalah bahwa ini berarti Anda hanya dapat memanggil skrip sekali karena mencari ID untuk menarik string kueri. Ini bisa diperbaiki jika, sebaliknya, skrip loop melalui semua elemen permintaan untuk melihat apakah salah satu dari mereka menunjuk ke sana, dan jika demikian, menggunakan contoh terakhir dari elemen skrip tersebut. Bagaimanapun, lanjutkan dengan kode:

Naskah dipanggil:

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 dipanggil melalui halaman berikut:

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

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

mungkin sangat sederhana

sebagai contoh

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

Anda kemudian dapat mengubah string kueri menjadi json seperti di bawah ini

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

dan kemudian bisa menggunakan like

console.log(json.id);

Ini dapat dengan mudah dilakukan jika Anda menggunakan beberapa kerangka kerja Javascript seperti jQuery. Seperti itu,

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

Sekarang Anda dapat menggunakan params ini dengan memisahkan sebagai parameter variabel Anda.

Proses yang sama dapat dilakukan tanpa kerangka kerja tetapi akan mengambil beberapa baris kode lagi.

Nah, Anda bisa membuat file javascript sedang dibangun oleh salah satu bahasa scripting, menyuntikkan variabel Anda ke file pada setiap permintaan. Anda harus memberi tahu server web Anda untuk tidak membagikan file js secara statis (menggunakan mod_rewrite sudah cukup).

Berhati-hatilah karena Anda kehilangan cache apa pun dari file-file js ini karena mereka terus-menerus diubah.

Sampai jumpa.

Pertanyaan yang bagus dan jawaban yang kreatif tetapi suggetion saya adalah untuk membuat metode Anda paramterized dan yang akan menyelesaikan semua masalah Anda tanpa ada trik.

jika Anda memiliki fungsi:

function A()
{
    var val = external_value_from_query_string_or_global_param;
}

Anda dapat mengubah ini menjadi:

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

Saya pikir ini adalah pendekatan yang paling alami, Anda tidak perlu membuat dokumentasi tambahan tentang 'parameter file' dan Anda menerima yang sama. Ini berguna khusus jika Anda mengizinkan pengembang lain menggunakan file js Anda.

Tidak, Anda tidak dapat melakukan ini dengan menambahkan variabel ke bagian querystring dari URL file JS. Jika penulisan bagian kode untuk mem-parsing string yang mengganggu Anda, mungkin cara lain adalah dengan mengkode variabel Anda dan meletakkannya dalam sesuatu seperti atribut rel dari tag? Saya tidak tahu seberapa valid ini dalam hal validasi HTML, jika itu sesuatu yang Anda sangat khawatirkan. Maka Anda hanya perlu menemukan atribut rel dari skrip dan kemudian json_decode itu.

misalnya

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

Ini bukan html yang valid (saya rasa tidak) tetapi tampaknya berfungsi jika Anda membuat atribut khusus untuk tag skrip di halaman web Anda :

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

Kemudian akses atribut khusus di javascript:

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

Tidak yakin apakah ini lebih baik atau lebih buruk daripada mem-parsing string sumber skrip.

Jika Anda memerlukan cara yang melewati pemeriksaan CSP (yang melarang in-line tidak aman) maka Anda harus menggunakan metode nonce untuk menambahkan nilai unik ke skrip dan arahan CSP atau menulis nilai Anda ke dalam html dan membacanya lagi.

Metode Nonce untuk 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>`)
})

atau tulis nilai ke metode html. dalam hal ini menggunakan Jquery:

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


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