ブラウザ内でローカルのhtmlファイルを更新して保存する
ちょっと込み入ったhtmlを書く、そんな作業をjsでサポートする。
そんな感じでブラウザ上で更新された Dom は、通常“このページを保存”には反映されない。（多分適当なブラウザ拡張とかはあると思う）そこで Flash で新しいファイルを保存できるようにしてみた。
ポイント
- ローカルにあるhtmlもサーバ上のhtmlも保存時には、Web上のFlashを使う。
- ローカルファイルからIEでのクロスドメインiframeの注意点
- 変更前のhtmlの全文はjQuery.getでやる。
1. html を作ってくれる Flash は Web に置く
Flash は、Web 上にある場合とローカルにある場合、当初はその二通りを想定していた。
しかし、Flash ファイルがローカルにあってそのパスに日本語が入ると場合にセキュリティサンドボックス障害のエラーがでる。（多分日本語が入るのが障害の条件だと思う）
仕方が無いので、ローカルの方はあきらめて Flash はサーバ上に置く。もちろんドメインが異なるので、クロスドメインなテクニックを使う。
ここで厄介なのが、ローカルにある html の iframe に Web 上の html を呼び出す場合（いきなり呼ばずにまずは自分自身の URL を iframe に読んで、window.name に値をセット。その後 Flash のある html に移動する）、IE でうまく動作しなかった。
2. IE 用の対処
IE でローカルファイルの場合 iframe を作れない（ie8）。空の iframe を作ってスクリプトを書き込む。そのスクリプトでファイル生成用の url に移動する。
他のブラウザでも結局この方法で動いたので、こちらに一本化した。
3. 変更前の html 全文の取得
DOM では html すべての内容を取得することができない。xml 宣言やドキュメントタイプは DOM で取得できないし、head内の内容もIEなど一部のブラウザで取得できない。
そこでアプローチを変えて通信で取得してみる。$.get( 'tinyWiki_Origin.html') を使うと全文が取得できた。
（Firefox3.6, IE678, Safari3, Iron8, Opera9,10,11 と試してみて、Opera11 だけ動かなかった。Opera11.00, 11.01とも動かないので一時の気まぐれではないのかもしれない、、、また、get に指定する url は相対パスでないと取得できないブラウザがあった。確か Opera と Safari、Iron。）
新しい html は以上で取得した html 原文のうち、コメントでマークされている部分を新しいものに置き換えることでデータができあがる。
4. window.name を使うクロスドメイン通信
空の iframe を作ってスクリプトを書き込んでやる。スクリプトはその window.name にデータをセットしたのち、Flash を呼び出す html のある url に飛ばしてやる。
window.name はドメインをまたいでデータを渡すことができる。クロスドメイン通信のテクニックはいくつかあるけど window.name は最大で8MBまでのデータを保持してくれるのでおそらく一番扱いやすいし高速だ。
5. 通信というか行きっぱなし
これはローカルにあるファイルから Web 上のページに遷移し、その後 history.back() でローカルのページに戻ることができない。
html がファイル保存の終了を知ることができないので、画面デザインもそれを見越したものになるし、所以制約される。
ダウンロードしたいファイルが変わった場合は、iframe を消して作り直す。
変態なことすると疲れる、、、
dojox.io.windowName.js http://trac.dojotoolkit.org/browser/branches/1.5/dojox/io/windowName.js