JavaScript

jQueryの$.getScript()を使って外部jsファイルの処理を実行する方法

jQueryの.getScriptを使用して外部jsファイルを読込み実行する方法をご紹介します。(最近のjqueryのバージョンであればクロスドメインでも出来るみたいです)

CSSの記述例

※必要に応じて変更して下さい。

<style type="text/css">
<!--
body {
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",Arial,sans-serif;
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.4em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:800px;
	margin:0 auto;
}
--><br />
</style>

$.getScript()で外部jsファイルを読み込むJavaScritp記述

※ページ表示時に$.getScript()で外部jsファイル(ext.js)を読み込み外部jsファイルの処理を実行します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
window.onload = (function(){
	$.getScript("https://dad-union.com/demo/js/20140418-getscript-external-file-crossdomain/ext.js");
});
</script>

$.getScript()を使った外部jsファイル(ext.js)内の記述例

※alert()メッセージを表示してるだけです。

alert("外部jsファイル「ext.js」が読込まれました。");

jQueryの.getScriptを使用し外部jsファイルの処理を実行するデモページ

jQueryの.getScriptを使用し外部jsファイルの処理を実行するデモ

JavaScriptってクロスドメインは基本的にNGだと思うのですがこれだったらOKになるのでしょうか。
今回はのデモはクロスドメインになって無いので、今度試して見ます。

 
※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。