divでなんちゃってiframe

javascript

GreyBoxなどのウインドウの出ないダイアログツールはちょっと便利。UIとしても分かりやすいし、既存のプログラムへの変更も少ない。

ただ、これ系のツールは内部でiframeを使っているのでIEが警告を出すことがある。そこでGreyBoxのコードに手を入れてiframeをdivで置き換えるという不毛な作業をやっていたのだけども、その過程でiframeっぽく使えるdivが出来た。かなりバカコード。

デモ

表紙からリンクページに飛んだり、フォーム入力を受け付けるなどのふつーのWeb画面遷移。

上のふつーのページ遷移をdiv内で実行。

仕組み

まずAJS.jsとdivframe.jsを読み込んで、

<script type="text/javascript" src="AJS.js"></script>
<script type="text/javascript" src="divframe.js"></script>

iframe化したいdivにidをつけて、srcに読み込みたいURLを指定する。

<div id="divframe" src="test-index.html"></div>

最後に、onloadなどで以下のようにJavaScriptを実行する。

new DIVFrame(AJS.$('divframe'));

動作は単純で、XHRでページを取ってきてbody以下をiframe化したdivの中に入れる。そのとき、リンクやフォームに細工をして、クリックするとちゃんとまたdiv内だけを書き換えるようにJavaScriptを仕込む。この細工はページ遷移の度に行われるので、単純なリンクやフォームによるページ遷移が続く限り永遠に行われる。

制限や課題など

  • XHRなのでクロスドメインな遷移はできない。
    • サーバー側の協力があれば多分可能。
  • divなので、混ぜると危険なJavaScriptやid、cssがあると困る。
    • divを使う以上、根本的に解決は難しい。
  • パスまでは書き換えてないので、ディレクトリを移動するとうまくいかないかも。
    • パスまで見るようにして頑張れば解決できるかも。

というか、単純にJavaScriptネタとして面白いというだけで、実現されている機能としてはつまらない。

AJS

今回使用した http://orangoo.com/labs/AJS/ はコンパクトな関数型ライブラリ。コンパクトで名前空間の問題も無くて非常に使いやすい。欠点としては、多少成長が激しいので、ちょっと前に作ったコードが動かなくなることがよくあることくらい。