上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

JavaScriptファイルの中からJavaScriptを呼び出す、つまり、JavaScriptから別のjsファイルを呼び出したいということです。

例えば、Javaなら
import java.util.Vector;
またはjspならば、pageディレクティブで
<%@ page import="java.util.Vector" %>

のように外部ファイル(クラス)をインポートできます。当然、インポートした後はその先にある関数を呼び出すこともできます。
必要な関数だけを読み込むことで余計な処理がなくなり、全ての関数を読み込むことに動作も軽快になります。

これと同じことをJavaScriptでも実現したい、と思ったわけです。

しかし、残念ながら、「JavaScript」から「JavaScript」のインポートする仕組みは、言語仕様上は存在しません
ただし、そこはJavaScript、不可能ではありません

以下はその方法です。
2つやり方があります。


【方法その1】

JavaScriptファイル内に
document.write("<script type='text/javascript' src='hoge.js'><\/script>");

と書けば呼び出すことができます。

しかし、この方法では hoge.js で定義している関数・定数を使用することができません。

例えば、
//hoge.js
var example = "this is hoge";


//foo.js
document.write("<script type='text/javascript' src='hoge.js'<>\/script>");
alert(example);//①


としたとき、① alert で「this is hoge」は表示されません。


ただし、以下のように変更すると、alert で example の中身を表示できます。
foo.js の中に関数を定義していれば、bar.jsで呼びだすこともできます(どちらもオブジェクトなので当然ですが)。

//hoge.js
var example = "this is hoge";


//foo.js
alert(example);


//bar.js
document.write("<script type='text/javascript' src='hoge.js'><\/script>");
document.write("<script type='text/javascript' src='foo.js'><\/script>");



【方法その2】

人力検索はてなで紹介されていました。
HTTPリクエストを使う方法です。Ajaxで使われている技術と同じですね。

//hoge.js
var xhr=null;
if (window.XMLHttpRequest)xhr=new XMLHttpRequest();
else if(window.ActiveXObject)
try {xhr=new ActiveXObject("Msxml2.XMLHTTP");}
catch(e){xhr=new ActiveXObject("Microsoft.XMLHTTP");}
xhr.open("GET","foo.js",false);xhr.send("");eval(xhr.responseText);
alert(example);


//foo.js
var example = "this is hoge";


これでhoge.jsを読み込むと、"this is hoge" というポップアップが開きます。
Related Posts

Thoughts on スポンサーサイトJavaScriptファイルの中からJavaScriptを呼び出す(import)

says...

Date:2014/11/23 12:19

その1の方法で、hoge.jsとfoo.jsの呼ぶ順序を間違えないようにしないといけませんね。
先にfooとやってしまうと、意味がありません・・

Leave a Reply

* less than 16 characters
* less than 24 characters
* less than 16 characters
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。