スクリプトの読み込み時に引数を渡すには、その引数を記述する場所によって
の3つの方法があります。
スクリプトの読み込み前に、引数とする変数をスクリプトで定義します。
<script type="text/javascript"> var a = 123; var b = 'abc'; </script> <script type="text/javascript" src="sample.js"></script>
スクリプトが読み込まれた時点でグローバル変数として定義されているため、スクリプト側で特別に値を取得する必要はありません。なお、この例ではインライン スクリプトとして記述していますが、外部スクリプトとして読み込んでも同じです。
単純でブラウザの実装にも依存しないため、これが最も確実な方法です。
HTML要素の属性に、引数とする値を記述します。このとき要素にIDを設定しておくと、その要素を参照しやすくなります。
たとえばtitle属性に値を記述するならば、
<div id="a" title="123" /> <div id="b" title="abc" /> <script type="text/javascript" src="sample.js"></script>
のようにします。そしてこれから値を取得するには、スクリプト側で
var a = document.getElementById( 'a' ).title; var b = document.getElementById( 'b' ).title;
とします。
HTMLの仕様に準拠しなくなりますが、非標準の属性にも値を設定できます。
<div id="a" foo="123" />
この場合、スクリプト側で値を取得するには、
var val = document.getElementById( 'a' ).getAttribute( 'foo' );
のようにElement.getAttribute()でアクセスします。一方でIE9より前に限るならば、標準の属性のように
var val = document.getElementById( 'a' ).foo;
としても値を取得できます。
CGIなどへパラメータを渡す方法です。これはJavaScriptがサポートする方法ではないため、値の受け渡しには工夫が必要です。
<script type="text/javascript" src="sample.js?a=123&b=abc"></script>
URLパラメータから値を取得するには、クライアント側で処理する方法とサーバ側で処理する方法の2つがあります。
// ※この関数は スクリプトの読み込み直後に呼ばれる必要がある function GetScriptParams() { var scripts = document.getElementsByTagName( 'script' ); var src = scripts[ scripts.length - 1 ].src; var query = src.substring( src.indexOf( '?' ) + 1 ); var parameters = query.split( '&' ); // URLクエリを分解して取得する var result = new Object(); for( var i = 0; i < parameters.length; i++ ) { var element = parameters[ i ].split( '=' ); var paramName = decodeURIComponent( element[ 0 ] ); var paramValue = decodeURIComponent( element[ 1 ] ); result[ paramName ] = paramValue; } return result; }
このようにすることでURLパラメータを取得できます。後半のURLクエリを分解するところは、GETの値を取得する方法と同様です。
上記の処理では、外部のスクリプトは読み込まれる順に実行されることを利用して自身のスクリプトを特定しています。よってスクリプトの読み込み直後に実行しない、もしくは他のスクリプトを後から読み込むと、上記のコードでは処理に失敗します。
たとえばGoogle AJAX Search APIのライブラリを読み込むときは、そのURLパラメータでAPIキーを指定するようになっています。
<script type="text/javascript"
src="http://www.google.com/jsapi?key=xx"></script>
このとき読み込まれたJavaScriptコードには、
if (!window['google']['loader']) {
window['google']['loader'] = {};
google.loader.ServiceBase = 'http://www.google.com/uds';
google.loader.GoogleApisBase = 'http://ajax.googleapis.com/ajax';
google.loader.ApiKey = 'xx'; // ここに注目
google.loader.KeyVerified = true;
...
のように、URLに含めたAPIキーがハードコーディングされています。