Bagaimana cara meneruskan parameter ke tag Script?

Saya membaca tutorial widget DIY - Bagaimana menyematkan situs Anda di situs lain untuk Widget XSS oleh Dr. Nic.

Saya mencari cara untuk meneruskan parameter ke tag skrip. Misalnya, untuk membuat pekerjaan berikut:

<script src="http://path/to/widget.js?param_a=1&amp;param_b=3"></script>

Apakah ada cara untuk melakukan ini?

Dua tautan menarik:

• Cara menyematkan widget Javascript yang bergantung pada jQuery ke lingkungan yang tidak diketahui (diskusi Stackoverflow)
• Artikel tentang meneruskan parameter ke tag skrip

Saya minta maaf karena menjawab pertanyaan yang sangat lama tetapi setelah menghabiskan satu jam bergulat dengan solusi di atas, saya memilih hal-hal yang lebih sederhana.

<script src=".." one="1" two="2"></script>

Di dalam skrip di atas:

document.currentScript.getAttribute('one'); //1
document.currentScript.getAttribute('two'); //2

Jauh lebih mudah daripada jquery OR url parsing.

Anda mungkin memerlukan polyfil untuk doucment.currentScript dari jawaban @Yared Rodriguez untuk IE:

document.currentScript = document.currentScript || (function() {
  var scripts = document.getElementsByTagName('script');
  return scripts[scripts.length - 1];
})();

Lebih baik Gunakan fitur di Atribut data html5 5

<script src="http://path.to/widget.js" data-width="200" data-height="200">
</script>

Di dalam file skrip http://path.to/widget.js Anda bisa mendapatkan paremeter dengan cara itu:

<script>
function getSyncScriptParams() {
         var scripts = document.getElementsByTagName('script');
         var lastScript = scripts[scripts.length-1];
         var scriptName = lastScript;
         return {
             width : scriptName.getAttribute('data-width'),
             height : scriptName.getAttribute('data-height')
         };
 }
</script>

Oke. Jenis retasan, tetapi berfungsi dengan cukup baik:

var params = document.body.getElementsByTagName('script');
query = params[0].classList;
var param_a = query[0];
var param_b = query[1];
var param_c = query[2];

Saya meneruskan params di tag skrip sebagai kelas:

<script src="http://path.to/widget.js" class="2 5 4"></script>

Artikel ini banyak membantu.

Cara lain adalah dengan menggunakan tag meta. Data apa pun yang seharusnya diteruskan ke JavaScript Anda dapat ditetapkan seperti ini:

<meta name="yourdata" content="whatever" />
<meta name="moredata" content="more of this" />

Data kemudian dapat ditarik dari tag meta seperti ini (paling baik dilakukan di penangan kejadian DOMContentLoaded):

var data1 = document.getElementsByName('yourdata')[0].content;
var data2 = document.getElementsByName('moredata')[0].content;

Sama sekali tidak ada kerumitan dengan jQuery atau sejenisnya, tidak perlu peretasan dan solusi, dan berfungsi dengan versi HTML apa pun yang mendukung tag meta ...

JQuery memiliki cara untuk meneruskan parameter dari HTML ke javascript:

Taruh ini di myhtml.htmlfile:

<!-- Import javascript -->
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- Invoke a different javascript file called subscript.js -->
<script id="myscript" src="subscript.js" video_filename="foobar.mp4">/script>

Di direktori yang sama buat subscript.jsfile dan taruh ini di sana:

//Use jquery to look up the tag with the id of 'myscript' above.  Get 
//the attribute called video_filename, stuff it into variable filename.
var filename = $('#myscript').attr("video_filename");

//print filename out to screen.
document.write(filename);

Analisis Hasil:

Memuat halaman myhtml.html memiliki 'foobar.mp4' yang dicetak ke layar. Variabel bernama video_filename diteruskan dari html ke javascript. Javascript mencetaknya ke layar, dan itu muncul sebagai tertanam ke dalam html di induknya.

jsfiddle bukti bahwa yang di atas berfungsi:

http://jsfiddle.net/xqr77dLt/

Jika Anda menggunakan jquery, Anda mungkin ingin mempertimbangkan metode datanya.

Saya telah menggunakan sesuatu yang mirip dengan apa yang Anda coba dalam tanggapan Anda tetapi seperti ini:

<script src="http://path.to/widget.js" param_a = "2" param_b = "5" param_c = "4">
</script>

Anda juga dapat membuat fungsi yang memungkinkan Anda mengambil parameter GET secara langsung (inilah yang sering saya gunakan):

function $_GET(q,s) {
    s = s || window.location.search;
    var re = new RegExp('&'+q+'=([^&]*)','i');
    return (s=s.replace(/^\?/,'&').match(re)) ? s=s[1] : s='';
}

// Grab the GET param
var param_a = $_GET('param_a');

Berkat jQuery, solusi sederhana yang sesuai dengan HTML5 adalah membuat tag HTML tambahan, seperti div, untuk menyimpan data.

HTML :

<div id='dataDiv' data-arg1='content1' data-arg2='content2'>
  <button id='clickButton'>Click me</button>
</div>

JavaScript :

$(document).ready(function() {
    var fetchData = $("#dataDiv").data('arg1') + 
                    $("#dataDiv").data('arg2') ;

    $('#clickButton').click(function() {
      console.log(fetchData);
    })
});

Demo langsung dengan kode di atas: http://codepen.io/anon/pen/KzzNmQ?editors=1011#0

Pada demo langsung, seseorang dapat melihat data dari atribut data- * HTML5 untuk digabungkan dan dicetak ke log.

Sumber: https://api.jquery.com/data/

Ini adalah utas yang sangat tua, saya tahu tetapi ini mungkin membantu juga jika seseorang sampai di sini begitu mereka mencari solusi.

Pada dasarnya saya menggunakan document.currentScript untuk mendapatkan elemen dari mana kode saya berjalan dan saya memfilter menggunakan nama variabel yang saya cari. Saya melakukannya dengan memperluas currentScript dengan metode yang disebut "get", jadi kita akan dapat mengambil nilai di dalam skrip itu dengan menggunakan:

document.currentScript.get('get_variable_name');

Dengan cara ini kita bisa menggunakan URI standar untuk mengambil variabel tanpa menambahkan atribut khusus.

Ini adalah kode terakhir

document.currentScript.get = function(variable) {
    if(variable=(new RegExp('[?&]'+encodeURIComponent(variable)+'=([^&]*)')).exec(this.src))
    return decodeURIComponent(variable[1]);
};

Saya lupa tentang IE :) Tidak bisa semudah itu ... Saya tidak menyebutkan bahwa document.currentScript adalah properti HTML5. Ini belum disertakan untuk versi IE yang berbeda (saya uji sampai IE11, dan itu belum ada). Untuk kompatibilitas IE, saya menambahkan bagian ini ke kode:

document.currentScript = document.currentScript || (function() {
  var scripts = document.getElementsByTagName('script');
  return scripts[scripts.length - 1];
})();

Apa yang kita lakukan di sini adalah mendefinisikan beberapa kode alternatif untuk IE, yang mengembalikan objek skrip saat ini, yang diperlukan dalam solusi untuk mengekstrak parameter dari properti src. Ini bukan solusi sempurna untuk IE karena ada beberapa batasan; Jika skrip dimuat secara asinkron. Browser yang lebih baru harus menyertakan properti ".currentScript".

Saya harap ini membantu.

Buat atribut yang berisi daftar parameter, seperti:

<script src="http://path/to/widget.js" data-params="1, 3"></script>

Kemudian, di JavaScript Anda, dapatkan parameter sebagai array:

var script = document.currentScript || 
/*Polyfill*/ Array.prototype.slice.call(document.getElementsByTagName('script')).pop();

var params = (script.getAttribute('data-params') || '').split(/, */);

params[0]; // -> 1
params[1]; // -> 3

Letakkan nilai yang Anda butuhkan di suatu tempat di mana skrip lain dapat mengambilnya, seperti masukan tersembunyi, lalu tarik nilai tersebut dari penampungnya saat Anda menginisialisasi skrip baru Anda. Anda bahkan dapat menempatkan semua parameter Anda sebagai string JSON ke dalam satu bidang tersembunyi.

Saya menginginkan solusi dengan dukungan browser lama sebanyak mungkin. Kalau tidak, saya akan mengatakan metode currentScript atau data atribut akan paling bergaya.

Ini adalah satu-satunya metode yang belum dibahas di sini. Terutama, jika karena alasan tertentu Anda memiliki banyak data, maka opsi terbaik mungkin adalah:

penyimpanan lokal

/* On the original page, you add an inline JS Script: */
<script>
   localStorage.setItem('data-1', 'I got a lot of data.');
   localStorage.setItem('data-2', 'More of my data.');
   localStorage.setItem('data-3', 'Even more data.');
</script>

/* External target JS Script, where your data is needed: */
var data1 = localStorage.getItem('data-1');
var data2 = localStorage.getItem('data-2');
var data3 = localStorage.getItem('data-3');

localStorage memiliki dukungan penuh peramban modern, dan secara mengejutkan juga mendukung peramban lama yang baik, antara lain IE 8, Firefox 3,5 dan Safari 4 [sebelas tahun yang lalu].

Jika Anda tidak memiliki banyak data, tetapi masih menginginkan dukungan browser yang ekstensif, mungkin opsi terbaik adalah:

Tag meta [oleh Robidu]

/* HTML: */
<meta name="yourData" content="Your data is here" />

/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;

Kekurangannya, adalah tempat yang tepat untuk meletakkan tag meta [hingga HTML 4] di tag head, dan Anda mungkin tidak ingin data ini ada di sana. Untuk menghindarinya, atau meletakkan tag meta di badan, Anda dapat menggunakan:

Paragraf tersembunyi

/* HTML: */
<p hidden id="yourData">Your data is here</p>

/* JS: */
var yourData = document.getElementById('yourData').innerHTML;

Untuk lebih banyak lagi dukungan browser, Anda dapat menggunakan kelas CSS sebagai ganti atribut tersembunyi:

/* CSS: */
.hidden {
   display: none;
}

/* HTML: */
<p class="hidden" id="yourData">Your data is here</p>

Ini adalah Solusi untuk jQuery 3.4

<script src="./js/util.js" data-m="myParam"></script>

$(document).ready(function () {
    var m = $('script[data-m][data-m!=null]').attr('data-m');
})