Yipin Sky Web Development Code Station ASP および Web 開発に関連するその他の古典的なコード コレクション ブログ - ASP コミュニケーション QQ グループ 12814238 (フル) 14725152 (オープン) ホームページ ASPJS/AJAX の再構築と最適化 包括的なコード データベースの収集と共有 オーディオビジュアル エンターテイメント オペレーティング システム前の記事 | 次の記事 JS/AJAX
JavaScript で JavaScript ファイルにパラメータを渡す方法 著者: Yipin 日付: 2009-03-23
フォント サイズ: 小、中、
大
これは、Google Adsense などのグローバル変数を使用する最も簡単な方法です。
プログラムコード
<script type="text/javascript">
google_ad_client = 'pub-3741595817388494';
</script>
<script type="text/javascript" src=" http://pagead2 。
googlesyndication.com/pagead/show_ads.js"></script>
欠点は、グローバル変数が導入されることです。ファイルを導入する方法には 2 つのバリエーションがあります。
プログラムコード
// バリアント 1: document.write を使用して出力する
<script type="text/javascript">
google_ga_id = 'g6u7un8646xx';
document.write(unescape('%3Cscript type="text/javascript" src=
" http://www.google-analytics.com/ga.js"%3E%3C/script%3E' ));
</script>
プログラムコード
// バリエーション 2: DOM 操作を使用して先頭に追加します
<script type="text/javascript">
G_BEACON_ATP = 'category=&userid=&channel=112ad_id=';
document.getElementsByTagName('head')[0].appendChild(document.
createElement('script')).src='http://taobao.com/atp.js';
</script>
注: 上記のコードは、実際のアプリケーションに基づいた仮想デモ コードです
。 注: バリアント 1 は、多くのアプリケーションで使用されます。
プログラムコード
<script type="text/javascript">
// 直接エスケープするだけです:
document.write('<script type="text/javascript" src="test.js"></script>');
// または Yahoo! ホームページのように:
document.write('<scr' + 'ipt type="text/javascript" src="test.js"></scr' + 'ipt>');
</script>
2.
スクリプト要素とすべての変数の src を取得して解析するよりも、次のようにパラメーターを渡すことを好みます。
プログラムコード
<script type="text/javascript" src="test.js?a=b&c=d"></script>
中心的な問題は、src 属性を取得する方法です。
方法 1 は、スクリプトに id 属性を追加し、id を通じて現在のスクリプトを取得し、正規表現を使用して src からパラメータを抽出することです。欠点は、HTML 4.01 仕様では、SCRIPT 要素に id 属性がないことです。結局のところ、この欠点は欠点ではありません。標準がないよりも標準を信じる方が良いのです。
2 番目の方法は、js ファイル名をフックとして使用し、js コードで document.getElementsByTagName('script') を渡した後、現在の js ファイルが通常のルールと照合されます。この方法は非常にオーソドックスですが、独自のファイル名が必要です。欠点は、コードが多く、洗練されておらず、パフォーマンスにわずかな影響を与えることです。
方法 3 は、方法 1 に基づいてカスタム属性データを単純に追加することです。
プログラムコード
<script id="testScript" type="text/javascript" src="test.js" data="a=b&c=d"></script>
test.js ファイルでは、渡されるパラメータは次の行を通じて取得されます。
プログラムコード
var scriptArgs = document.getElementById('testScript').getAttribute('data');
4 番目の方法は、js の順次実行メカニズムを使用する方法です (js ファイルは同期または非同期でロードできますが、実行時にはドキュメント フロー内の順序で実行する必要があります)。 js ファイルが実行されるときは、「読み込まれた」js ファイルの最後のものである必要があります。
プログラムコード
var scripts = document.getElementsByTagName('script');
var currentScript = scripts[scripts.length - 1];
方法 4 は、方法 2 よりも器用で天才的です。
コードの簡略化とパフォーマンスの観点からは、方法 3 > 方法 1 > 方法 4 > 方法 2
要約: 標準を重視する場合は、方法 4 をお勧めします。私と同じように、標準に完全に準拠する必要はないと思われる場合は、方法 4 をお勧めします。 3をお勧めします。
3. インスピレーション プラン あなたが私と同じように John Resig の忠実なファンであれば、昨年 8 月に非常に話題になった「劣化スクリプト タグ」をまだ覚えているかもしれません。 John Resig は私たちに想像力の扉を開きました。この記事の問題については、次のような「邪悪な方法」を使用することもできます。
プログラムコード
<script type="text/javascript" src="test.js">
TB.SomeApp.scriptArgs = 'a=b&c=d';
</script>
test.js ファイル内:
プログラムコード
TB = {}; TB.SomeApp = {};
var scripts = document.getElementsByTagName("script");
eval(scripts[scripts.length - 1].innerHTML);
これにより、パラメーターが TB.SomeApp.scriptArgs 変数に保存されます。
パラメータがそれほど多くない場合は、次のようにすることもできます。
プログラムコード
<script type="text/javascript" src="test.js">a=b&c=d</script>
jsファイル:
プログラムコード
var scripts = document.getElementsByTagName("script");
var scriptArgs = scripts[ scripts.length - 1 ].innerHTML.replace(/[s]/g, '');
想像力は無限です。onload を使用することもできます。
プログラムコード
<script type="text/javascript" src="test.js" xxxxx="TB.SomeFun('a=b&c=d')"></script>
js ファイルで関数を定義するだけです。
プログラムコード
TB = {};
TB.SomeFun = function(arg) { //コード };
上記のコードは、IE 以外のブラウザでも正しく実行できます。愚かな ie の場合は、数行のコードを追加する必要があります。
プログラムコード
if(window.ActiveXObject) {
var scripts = document.getElementsByTagName('script');
eval(scripts[scripts.length - 1].getAttribute('onload'));
}
私たちが発掘の精神を持ち続ける限り、もっと感動的な解決策が生まれると信じています -.-
上記の解決策を要約した後、どの解決策が最適ですか?私の答えは、「最善のものはなく、最も適切なものがあるだけだ」です。なぜなら、アプリケーションやコンセプトが異なれば、「良い」の定義も異なるからです。
たとえば、私の現在の哲学は、標準に完全に準拠する必要はない、というものです。グローバル変数に関して、避けなければならないのは使用ではなく乱用です。したがって、最も単純でパフォーマンスが最高のグローバル変数ソリューションを選択します。