(cache) .js dynamicLoad()

ページ構築後の外部jsダイナミックロード用関数

[ update! 2007.12.14 ] 最新→ dynamicLoad関数でcharsetも指定できます
[ update! 2007.10.14 ] Safariで文字化けしない方法追加これでほぼフルクロスブラウザ化完了...なんというスローな...f^^;;。
[ update! 2004.6.21 ] bosan.netのjsが1年間も死んでいました...なんというスローな...f^^;;。
ついでにjsgt.orgにもjsを追加。
[ update! 2002.7.17 ] Moz n7 に対応修正しました( Thanx はぎさん、Shimonoさん )。

通常は外部jsファイルはページ構築後にロードできないがこの関数は、たとえばPerlのrequireなどのように必要な時に呼び出して使えるようにするためのもの。これによって、必要な最小限のソースだけを必要な時にロードして使えるようになる。また、なるべくクロスブラウザで安定して動作するように微調整してある。

基本サンプル

使用可能なブラウザ  

 Win   n4 n6 n7 f1 m1 e4 e5 e6,
 Mac   n4 n6 n7 f1 m1 e4.5  e5 (s2),
 Linux n4 n6 n7 f1 m1

読み込む外部ファイル

------test1.jsの中身------
alert('test1')


------test2.jsの中身------
alert('test2')

ソースサンプル

------source------


<script language="JavaScript" src="./dynamicload.js"></script>


<br>◎カレントディレクトリのjsファイルを読み込む
<br>
  <input type="button" 
         value="load test1.js" 
         onClick="dynamicLoad('test1.js')"><br>
  <input type="button" 
         value="load test2.js" 
         onClick="dynamicLoad('test2.js')">

<br>
<br>◎bosan.netサーバーのjsファイルを読み込む
<br>
  <input type="button" 
         value="load from bosan.netサーバーtest1.js" 
         onClick="dynamicLoad('http://bosan.net/test2/test1.js')"><br>
  <input type="button" 
         value="load from bosan.netサーバーtest2.js" 
         onClick="dynamicLoad('http://bosan.net/test2/test2.js')">
<br>

<br>
<br>◎jsgt.orgサーバーのjsファイルを読み込む
<br>
  <input type="button" 
         value="load from jsgt.orgサーバーtest1.js" 
         onClick="dynamicLoad('http://jsgt.org/test/loadjs/test1.js')"><br>
  <input type="button" 
         value="load from jsgt.orgサーバーtest2.js" 
         onClick="dynamicLoad('http://jsgt.org/test/loadjs/test2.js')">
<br>

<br>◎jsgt.orgサーバーのjsファイル　utf-8 bom付き と URIエンコード処理 を読み込む
<br> (これらの方法によりSafari2でも文字化けしなくなります)
<br>

  <input type="button" 
         value="load http://jsgt.org/test/loadjs/test3utf8bom.js" 
         onClick="dynamicLoad('http://jsgt.org/test/loadjs/test3utf8bom.js')"><br>
  <input type="button" 
         value="load http://jsgt.org/test/loadjs/test3enc.js" 
         onClick="dynamicLoad('http://jsgt.org/test/loadjs/test3enc.js')">

</form>


dynamicload.js

------dynamicload.jsの中身------

/*===============ページ構築後外部js取得用関数 UseFree */
/*==========================================================
 Win   n4 n6 n7 moz e4 e5 e6,
 Mac   n4 n6 n7 moz e4.5 e5 (s2),
 Linux n4 n6 n7 moz         
============================================================
 書式
 dynamicLoad('外部jsファイル名')
 使用例  
 dynamicLoad('http://game.gr.jp/test.js')

 通常は外部jsファイルはページ構築後にロードできませんが
 この関数は上記のブラウザで、たとえばPerlのrequireなど
 のように必要な時に呼び出して使えるようにするためのもの。
 これによって、必要な最小限のソースだけを必要な時に
 ロードして使えるようになります。

 更新履歴

 * 2006.10.14 Safari2で文字化け回避するにはutf-8(bom)か
   URIエンコード処理をしてください
 * 2002.7.15 Mozの仕様変更?へ対応
   http://bugzilla.mozilla.org/show_bug.cgi?id=26790
   ThanxはぎさんShimonoさん

 Support http://game.gr.jp/mag2p/2/loadjs/loadjs.htm
==========================================================*/

function dynamicLoad(jsFileName){

  //--for cache 
  var now = new Date();
  var getData = jsFileName+'?nc='+now.getTime();

  if( document.all ){ 

     if( navigator.userAgent.indexOf("Win")!=-1 ){

       //--for document.all && Win
       eval(document.all('dynld')).src = getData;

     } else if( navigator.userAgent.indexOf("Mac")!=-1 ){

       //--for document.all && Mac
       document.body.insertAdjacentHTML('BeforeEnd'
        ,'<scr'+'ipt src="'+getData+'"><scr'+'ipt/>');

     }

  } else if(document.getElementById){

    //--for w3c-dom  widthout document.all 
    var cnode =document.getElementById('dynld');
    var nnode = document.createElement('script');
    nnode.src = getData;
    nnode.id  = 'dynld';
    cnode.parentNode.replaceChild(nnode,cnode);

  } else {

    //--for nondhtml(n4...)
    if(document.images){
      var datasrc   = new Image();
      datasrc.src   = getData;
      location.href = datasrc.src;
    }

  }
}
document.write('<scr'+'ipt id="dynld"></scr'+'ipt>');

/*====================ページ構築後外部js取得用関数ここまで*/

Examples

この関数を使うメリット

クロスプラットフォーム(Win,Mac,Linux,etc...)でクロスブラウザ(N4,N6,Moz,IE4,IE5,IE6)。
スキルは、JavaScriptが使えればOK。
.jsに置いた関数やオブジェクトなどのライブラリをダイナミックに使えるようになる。
スクリプトフローの分岐後に必要な関数などを呼び込めるのでソースがシンプルになりメンテナンスも各.jsごとに小分けできる。
IEだけでしか使えない Remote Scripting より動作が早い。
データファイルとして使う場合XMLなどに比べて宣言やタグ付けが不要なのでデータ量がかなり少なくて済む。XMLパーサなども不要。
したがって、転送速度と動作が速い。

たとえば、XMLなら1件のデータごとに
```
 <book>
  <title>JavaScript</title> 
  <author>高橋</author> 
  <cdrom>1</cdrom>   
  <isbn>4-7980-0161-9</isbn> 
  <price>2500</price> 
  <shyuttpan>秀和</shyuttpan> 
  <url>http://game.gr.jp/js/</url> 
 </book>

◎データ1件当たり　179文字(ヘッダを除いてもこんなに...)
```
こんなにタグ付けして、更にこの他にXSLによる定義ファイルまで送らないといけないわけで1000件もあると悲しくなってしまいますがf^^;この関数なら、たとえば、
```
 data0="title,author,cdrom,isbn,price,shyuttpan,url"
 data1="JavaScript,高橋,1,4-7980-0161-9,2500,秀和,http://game.gr.jp/js/"

◎データ1件当たり　73文字
```
こんな感じで済んでしまいます(^^)。ま、好みで、フィールド宣言は別立てにしてもよいと思いますが、いずれにしても、軽くて簡単でハイスピードというわけです。

この関数を使うデメリット

JavaScriptを使えないとアウト。

この関数使いのワンランク上を目指したい方は．．．

JavaScript with SSI / Perl / PHP...
ページの書き換え無しにデータだけをダイナミックにサーバーから取り出して受信するテクニックです。メリットは一回の接続で送受信が可能なこと、ページ更新不要で最小限のデータだけのやりとりですみ、しかもクロスブラウザに高速で動作することなどです。

Dynamic HTML cross-browser/Examples

Toshiro Takahashi