web-dev-qa-db-ja.com

Scriptタグにパラメーターを渡す方法は？

私はチュートリアルを読みました： http://drnicwilliams.com/2006/11/21/diy-widgets/ Dr. NicによるXSSウィジェット.

スクリプトタグにパラメーターを渡す方法を探しています。たとえば、次の作業を行うには：

<script src = "http：//path/to/widget.js？param_a = 1＆param_b = 3">

これを行う方法はありますか？

更新：2つの興味深いリンク：

javascriptparameterswidgetxssscript-tag
65
Tomer Lichtash

とった。ハッキングのようなものですが、かなりいいです：

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

スクリプトタグのパラメーターをクラスとして渡します。

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

この記事 は大いに役立ちました。

16
Tomer Lichtash

とても古い質問に答えて申し訳ありませんが、上記の解決策に1時間取り組んだ後、もっと簡単なものを選びました。

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

上記のスクリプト内：

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

Jquery OR url parsing。

IEの@Yared Rodriguezの回答から、doucment.currentScriptのpolyfilが必要になる場合があります。

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

Html5で機能を使用することをお勧めします 5データ属性

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

スクリプトファイル内で http://path.to/widget.js この方法でパラメーターを取得できます。

<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>
55
OBender

JQueryには、HTMLからjavascriptにパラメーターを渡す方法があります：

これをmyhtml.html file：

<!-- 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>

同じディレクトリでsubscript.jsファイルとそこにこれを置きます：

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

結果の分析：

Myhtml.htmlページをロードすると、「foobar.mp4」が画面に出力されます。 video_filenameという変数がhtmlからjavascriptに渡されました。 Javascriptが画面に出力し、親のhtmlに埋め込まれているように見えました。

jsfiddle上記の動作の証明：

http://jsfiddle.net/xqr77dLt/

10
Eric Leschinski

別の方法は、メタタグを使用することです。 JavaScriptに渡されるデータはすべて、次のように割り当てることができます。

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

次に、このようなメタタグからデータを取得できます（DOMContentLoadedイベントハンドラーで最適に実行されます）。

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

JQueryや同類のものの面倒はまったくなく、ハックや回避策は不要で、メタタグをサポートするHTMLバージョンで動作します...

7
Robidu

Jqueryを使用している場合は、 それらのデータメソッド を検討することをお勧めします。

私はあなたの応答であなたがしようとしているものに似たものを使っていますが、このようなものです：

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

GET paramsを直接取得できる関数を作成することもできます（これは私が頻繁に使用するものです）。

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

これは非常に古いスレッドですが、解決策を探して誰かがここに来たら、これも役立つかもしれません。

基本的には、document.currentScriptを使用してコードの実行元の要素を取得し、探している変数の名前を使用してフィルター処理します。 「get」というメソッドを使用してcurrentScriptを拡張したので、次を使用してそのスクリプト内の値を取得できます。

document.currentScript.get('get_variable_name');

このようにして、特別な属性を追加せずに標準URIを使用して変数を取得できます。

これが最終コードです

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

私はIE :)を忘れていました。それはそれほど簡単なことではありません...さて、document.currentScriptがHTML5プロパティであることは言及しませんでした。 IEの異なるバージョンには含まれていません（IE11までテストし、まだありませんでした）。IE互換性のために、この部分を追加しましたコードに：

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

ここで行っていることは、IEの代替コードを定義することです。このコードは、srcプロパティからパラメーターを抽出するソリューションで必要な現在のスクリプトオブジェクトを返します。これは、IEの完璧な解決策ではありません。いくつかの制限があるためです。スクリプトが非同期でロードされる場合。新しいブラウザには、「。currentScript」プロパティを含める必要があります。

役に立てば幸いです。

3
Yared Rodriguez

JQueryのおかげで、単純なHTML5準拠ソリューションは、divなどの追加のHTMLタグを作成してデータを保存することです。

[〜＃〜] 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);
    })
});

上記のコードを使用したライブデモ： http://codepen.io/anon/pen/KzzNmQ?editors=1011#

ライブデモでは、連結してログに出力されるHTML5 data- *属性のデータを見ることができます。

ソース： https://api.jquery.com/data/

3
gagallo7

隠し入力のように、他のスクリプトが値を取得できる場所に必要な値を入れ、新しいスクリプトを初期化するときにそれらの値をコンテナから引き出します。すべてのパラメータをJSON文字列として1つの非表示フィールドに入れることもできます。

2
bwest

次のように、パラメーターのリストを含む属性を作成します。

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

次に、JavaScriptでパラメーターを配列として取得します。

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
0
Eternal Darkness