Ajax対応ブラウザの下限は？外部Scriptの動的ロードを調べた
「os0x.blog / 外部JavaScriptの動的ロード」へのリンクを追記。(2024/04/05)
「os0x.blog / Opera9.2から9.5でのJavaScript周りの変更点」へのリンクを追記。(2024/04/04)
iframe からライブラリのコード文字列を親フレームに渡して、親フレームで eval 等でライブラリを有効化すれば、下で言及している「iframe のリロードでメモリをリフレッシュするテクニック」とバッティングしませんね。(2024/02/26)
iframe を使ったスクリプトの動的ロードは JSONP に留めて、ponyfill は document.write で追加するのが良いと思います。iframe でライブラリを含むコードを実行してしまうと iframe のリロードでメモリをリフレッシュするテクニックが(多分)使えない為です。参考記事に追加しました。(2022/11/13)
iframe の中で行う動的ロードの調査結果を追記。これにより Ajax 対応ブラウザに Gecko 0.6~0.9 が加わりました。タイトルに「Ajax 対応ブラウザの下限は？」を追加しました。検索向け説明を追記しました。(2022/11/05)
RegExp の ponyfill の動的ロードを最初期の DHTML ブラウザ（Opera 7.5x 以下、Gecko 0.9未満）で行ってみたところ、これより後のブラウザと異なったので、テストページを書いて、表に纏めました。この調査を元に書いたのが ExternalScriptLoader.js です。
調査結果の概要
文書を読み込み中の document.write でしか外部スクリプトを追加できないブラウザ(~Opera 7.1x, ~Gecko 0.9)を特定しました。
これ以外のブラウザで一般的な手段をサポートしないものには、iframe 内を contentWindow.document.write() で書き換えて外部スクリプトを追加できるもの(Gecko ~0.9)、<script> を再利用するパターンだけサポートするブラウザ(Opera 7.2x)がありました。
これらのブラウザは document.createElement('script') が動作するブラウザと同様に追加のタイミングを調整できます。
動的な外部スクリプトの追加ができる、ということは JSONP が可能です。XMLHttpRequest をサポートしていなくても Ajax が出来る、Ajax 対応ブラウザである、ということです。
モバイル Opera 8.5 を搭載するニンテンドーDSブラウザーは XHR をサポートしないが Ajax 対応と紹介されていたようです。
一部の記事で Ajax 対応と紹介されたことがあったが、狭義の Ajax で基幹技術とする
XMLHttpRequestは実装されていない。
調査結果
テストページの実行結果が次です。
| ブラウザ | 動的外部スクリプト | 動的インラインスクリプト | |||||||
|---|---|---|---|---|---|---|---|---|---|
1. .createElement('script') | 2. .src の変更 | 3. iframe | 4-1. .createTextNode | 4-2. .innerHTML | 4-3. .innerText | 4-4. .textContent | 4-5. .text | 4-6. ハック
| |
| IE5(Windows 2000) | Yes | Yes | ? | Error | Error | Error | No | Yes | Error |
| IE5.5(Windows XP, IE Tester) | Yes | Yes | ? | Error | Error | Error | No | Yes | Yes |
| IE6, 7(Windows XP, IE Tester) | Yes | Yes | ? | Error | Error | Error | No | Yes | No |
| Safari 3.1.2(Windows 2000), 3.2.3(Windows XP) | Yes | No | ? | Yes | No | Yes | Yes | Yes | No |
| Opera 7.03, 7.11(Windows XP) | No | No | No | No | No | No | No | No | No |
| Opera 7.20, 7.23(Windows XP) | No | Yes | Yes | Yes | No | Yes | No | No | No |
| Opera 7.54u2(Windows XP) | Yes | Yes | Yes | Yes | No | Yes | No | Yes | No |
| Opera 8.02(Windows XP) | Yes | Yes | ? | Yes | Yes | Yes | No | Yes | Yes |
| Gecko 0.6, 0.7, 0.8, 0.9(Windows XP or 2000) | No | No | Yes | No | No | No | No | No | No |
| Gecko 0.9.1~0.9.9(Windows XP or 2000) | Yes | No | ? | Yes | No | No | No | Yes | Yes |
動的インラインスクリプトの調査結果も含みますが、スクリプトで組み立てたコード文字列を eval(source) や new Function(source), execScript() で実行できるので、いまいち使いどころが分かりません。HTMLElement を作って文書ツリーに追加する分、メモリを浪費するだけのように思います。
参照した記事
| 公開日 | 記事タイトル |
|---|---|
| 2004? | Dynamically Loading JS Files |
| 2006/11/07 | script要素のtextプロパティ textプロパティのあるDOM要素, 読取専用のinnerHTML要素を紹介。 |
| 2006/12/07 | innerHTMLでscriptする |
| 2007/03/06 | script要素のdefer属性の実装 あとIEはscript要素にdefer属性をつけるとinnerHTMLに代入したscriptが実行されるという仕様がある。 |
| 2007/06/05 | Operaでも非同期リクエストが並列処理できる img-JSONP 本件、未実装！ |
| 2007/10/11 | JavaScriptを動的に書き出す |
| 2008/07/28 | Opera9.2から9.5でのJavaScript周りの変更点 JSONPが非同期リクエストに修正 |
| 2008/08/27 | 外部JavaScriptの動的ロード |
| 2009/01/28 | JSONPのエラーを判断する 本件、未実装！ |
| 2010/05/28 | JavaScriptによって動的に script要素を追加する場合のブラウザごとの挙動の違い |
| 2013/02/19 | Internet ExplorerでJavaScriptの動的実行 |
| 2017/01/07 | iframe 要素内に動的に script 要素を出力すると Internet Explorer が応答なしになる場合がある |
先行する調査、2004年の Web アーカイブより
Each of the links below attempts to load a .js file dynamically via the method that is named in the link text.
If you click a link and get an alert, then that method worked. If you get no alert, that method does not work :(
Browser Platform Change Source Change InnerHTML Create Element Load It In A Layer IE4.0 Windows Untested Untested Untested No IE5.0 Windows Yes No Yes No IE5.5 Windows Yes No Yes No IE6.0 Windows Yes No Yes No Opera 6.06 Windows No No No No Opera 7.23 Windows Yes No No No K-Meleon 0.8.2 Windows No No Yes No Mozilla 1.5 Windows No No Yes No Mozilla 1.6 Windows No No Yes No Firebird 0.7 Windows No No Yes No Netscape 4.72 Windows No No No No Netscape 4.77 Windows No No No Yes Netscape 4.80 Windows No No No Yes Netscape 6.2.3 Windows No Yes Yes No Netscape 7.1 rev 1.4 Windows No No Yes No IE5 MAC Yes Reports an Error Reports an Error Untested IE5.2 MAC No Yes No No Safari MAC No No No No Netscape 7.1 MAC No No Yes No iCab 2.9.7 MAC No No No No Mozilla 1.4 Linux No No Yes No Galeon 1.3.8 Linux No No Yes No Konqueror 3.1.4 Linux No No No No Notes:
- Windows:
- Netscape 7.1: Hangs the loading status bar at 100%
- Why is NS7.1 resizing my buttons?
- Mozilla 1.5: Hangs the loading status bar at 100%
- Opera 7.1: Spoof mode made no difference
- MAC: