- 読み込む外部JSファイルに値を渡したい
- 代表的なやり方をいくつか紹介します
- JS初心者向けの記事です
<script type="text/javascript" src="sample.js"></script>こんな感じで外部JSを読み込んで使うことは多いと思います。
この時に、このhogehoge.jsに引数として値を渡したいのですが、いくつか代表的なやり方がありますので、紹介しておきます。
- 外部JSファイルへの値の渡し方
- 代表的な３つのやり方
- 個人的におすすめの方法
外部ファイルのJavaScriptに引数として値を渡す方法
scriptタグで外部JSファイルを読み込んだ時に、そのJavaScriptへ値を渡す方法を３つ紹介します。
1.scriptで変数を定義して値をセット
１つ目のやり方は外部スクリプトを読み込む前に、scriptで変数を宣言してそこに値を入れておく方法です。
<script type="text/javascript">
var hoge = 100;
var fuga = 'xyz';
</script>
<script type="text/javascript" src="sample.js"></script>この方法だと、sample.jsの外部JSファイルが読み込まれた時点で、hogeとfugaがグローバル変数として定義されているので、外部JS内で特に意識することなく利用することが可能です。
やってることは単純で、ブラウザ依存もしないので最も確実、簡単な方法だと思います。
2.HTML要素の属性に値をセット
２つ目の方法は、HTMLの属性に値を入れておいて、外部JS内からHTML要素にアクセスして値を取得する方法です。
<div id="hoge" title="100" />
<div id="fuga" title="xyz" />
<script type="text/javascript" src="sample.js"></script>この場合、外部JSでは以下のように値を取得します。
var hoge = document.getElementById( 'hoge' ).title;
var fuga = document.getElementById( 'fuga' ).title;HTMLの要素にIDを設定しておくと、要素を参照しやすくなります。
上記のように指定してもいいですし、JQuery使うならセレクタで取得しても良いです。
3.外部JSのsrcにURLパラメータとしてセット
３つ目のやり方はjavascriptのsrc属性のURLにパラメータとして値をセットして渡す方法です。
<script type="text/javascript" src="sample.js?hoge=100&fuga=xyz"></script>一番シンプルに書ける方法のように見えますが、値の取得には少し注意が必要な方法です。
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;
}
var params = GetScriptParams();
var hoge = params['hoge'];
var fuga = params['fuga'];やっていることはscriptのsrs属性のURLを解析して取得してるだけです。
※query-stringとかのライブラリを使えばもっと簡潔に書けるようになりますので、気になる人は調べてみるといいです。
注意点としては、この方法は自身のスクリプトを読み込んだ直後に処理されないと正常に動作しません。
読み込み直後に処理が行われなかったり、処理前に他の外部スクリプトを読み込んだりすると値は取得できないと思います。
個人的にオススメのやり方
個人的には1の標準的なやり方が、ブラウザ依存もなく、至ってシンプルに実装できるのでオススメです。
多少scriptがごちゃごちゃしてしまうかもしれませんが、引数として値を渡すscript要素も外部JSファイルにすることも可能なので、引数が多い場合は外部ファイルにするといいかもしれません。
外部ファイルのJavaScriptに引数として値を渡す方法まとめ
ざっと３つ紹介しましたが、どれも一長一短と言ったところだと思います。
1、2の方法ではHTML内のscript要素がごちゃごちゃしますし、3の方法はscriptはシンプルですが、値の取得で読み込み順に影響されるなどメリット・デメリットを正しく理解して使い分けて貰ればいいと思います。
誰かの参考になれば幸いです。
- 外部JSファイルに値を渡す方法は大きく3つ
- 1.グローバル変数を宣言してセット
- 2.HTML要素の属性にセットする
- 3.scriptのsrc要素のURLにパラメータとしてセットする
- どれも一長一短だけど、個人的には1がオススメ
コメント