チュートリアルDIYウィジェットを読みました-ニック博士によるXSSウィジェットの別のサイトにサイトを埋め込む方法。
スクリプトタグにパラメータを渡す方法を探しています。たとえば、次の作業を行うには：
<script src="http://path/to/widget.js?param_a=1&param_b=3"></script>
これを行う方法はありますか？
2つの興味深いリンク：
回答:
非常に古い質問に答えてしまったことをお詫びしますが、上記の解決策と格闘した後、私はもっと単純なものを選びました。
<script src=".." one="1" two="2"></script>
上記のスクリプトの内部：
document.currentScript.getAttribute('one'); //1
document.currentScript.getAttribute('two'); //2
jqueryまたはurlの解析よりもはるかに簡単です。
@Yared RodriguezのIEに対する回答から、doucment.currentScriptのポリフィルが必要になる場合があります。
document.currentScript = document.currentScript || (function() {
var scripts = document.getElementsByTagName('script');
return scripts[scripts.length - 1];
})();
src="..."これは、どのsrcも関係ないことを意味していることがわかります:)
<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>
myAwesomeWigretNo2、またはmyAwesomeWigretNo681??? これを修正して実際の変数を受け入れるにはどうすればよいですか？
document.currentScript（独自のファイルにないスクリプトに対してのみ機能します）id、<script>タグにを付けて、それによってそれを見つけるなどです。
とった。一種のハックですが、それはかなりうまく機能します：
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>
この記事は大いに役立ちました。
別の方法は、メタタグを使用することです。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バージョンでも機能します...
これをmyhtml.htmlファイルに入れます：
<!-- 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証明：
jqueryを使用している場合は、それらのデータメソッドを検討することをお勧めします。
私はあなたがあなたの応答で試みているものに似ているが、このようなものを使用しました：
<script src="http://path.to/widget.js" param_a = "2" param_b = "5" param_c = "4">
</script>
GETパラメータを直接取得できる関数を作成することもできます（これは私が頻繁に使用するものです）。
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');
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＃0
ライブデモでは、HTML5 data- *属性のデータを連結して、ログに出力することができます。
それは非常に古いスレッドです、私は知っていますが、誰かが解決策を探したらここに来れば、これも役立つかもしれません。
基本的に、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」プロパティを含める必要があります。
お役に立てば幸いです。
次のように、パラメータのリストを含む属性を作成します。
<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
必要な値を、非表示の入力など、他のスクリプトが取得できる場所に配置し、新しいスクリプトを初期化するときにそれらの値をコンテナーからプルします。すべてのパラメーターをJSON文字列として1つの非表示フィールドに入れることもできます。
古いブラウザを可能な限りサポートするソリューションが必要でした。それ以外の場合は、currentScriptまたはデータ属性メソッドのいずれかが最もスタイリッシュだと思います。
これは、ここでまだ取り上げられていないこれらの方法の唯一のものです。特に、何らかの理由で大量のデータがある場合、最良のオプションは次のとおりです。
ローカルストレージ
/* 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は、最新のブラウザーを完全にサポートしており、IE 8、Firefox 3,5、Safari 4 [11年前]などの古いブラウザーも驚くほど優れたサポートを提供しています。
大量のデータがなくても、広範なブラウザサポートが必要な場合は、次の方法が最適です。
メタタグ[Robiduによる]
/* HTML: */
<meta name="yourData" content="Your data is here" />
/* JS: */
var data1 = document.getElementsByName('yourData')[0].content;
これの欠点は、[HTML 4まで]メタタグを配置する正しい場所がheadタグにあり、このデータをそこに配置したくない場合があることです。これを回避する、またはメタタグを本文に配置するには、次を使用できます。
隠し段落
/* HTML: */
<p hidden id="yourData">Your data is here</p>
/* JS: */
var yourData = document.getElementById('yourData').innerHTML;
さらに多くのブラウザをサポートするには、hidden属性の代わりにCSSクラスを使用できます。
/* CSS: */
.hidden {
display: none;
}
/* HTML: */
<p class="hidden" id="yourData">Your data is here</p>
これはのためのソリューションである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');
})