外部ファイルのスクリプトに引数を渡す方法

スクリプトの読み込み時に引数を渡すには、その引数を記述する場所によって

の3つの方法があります。

script要素で変数を定義

スクリプトの読み込み前に、引数とする変数をスクリプトで定義します。

<script type="text/javascript">
  var a = 123;
  var b = 'abc';
</script>

<script type="text/javascript" src="sample.js"></script>

スクリプトが読み込まれた時点でグローバル変数として定義されているため、スクリプト側で特別に値を取得する必要はありません。なお、この例ではインライン スクリプトとして記述していますが、外部スクリプトとして読み込んでも同じです。

単純でブラウザの実装にも依存しないため、これが最も確実な方法です。

HTML要素の属性値に値を記述

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 foo = document.getElementById( 'a' ).getAttribute( 'foo' );

のようにElement.getAttribute()でアクセスします。一方でIE9より前に限るならば、標準の属性のように

var foo = document.getElementById( 'a' ).foo;

としても値を取得できます。

script要素のsrc属性に、URLパラメータとして値を記述

CGIなどへパラメータを渡す方法です。これはJavaScriptがサポートする方法ではないため、値の受け渡しには工夫が必要です。

<script type="text/javascript" src="sample.js?a=123&b=abc"></script>

URLパラメータから値を取得するには、クライアント側で処理する方法とサーバ側で処理する方法の2つがあります。

1. クライアント側 : script要素のsrc属性を解析

// ※ この関数は スクリプトの読み込み直後に呼ばれる必要がある
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の値を取得する方法と同様です。

上記の処理では、外部のスクリプトは読み込まれる順に実行されることを利用して自身のスクリプトを特定しています。よってスクリプトの読み込み直後に実行しない、もしくは他のスクリプトを後から読み込むと、上記のコードでは処理に失敗します。

2. サーバ側 : CGIでURLパラメータを取得し、JavaScriptコードを出力

たとえば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キーがハードコーディングされています。