webブラウザに関する問題解決は、そこそこ秀でている下駄です。
プログラミング学習ができるPodcastを、毎日配信していて、そのwebサイト内にある、htmlとcssとjavascriptが、その場でプログラミングできる「コード」機能が、Firefoxで機能していないことが判明しました。
そして、それを解消するために分かったことをブログに書き残しておきます。
問題発覚
それは、先日このブログで書いた「CSSとJavascriptだけのBubbleアニメ」という記事を、GoogleChromeでしか確認していなかったので、いつも使っているMacと、仕事の時にたまに使うWindowsで見てみたトコロ、IEがコケるのは、想定通りだったので、そこは無視してもよかったんですが、Firefoxがwinでもmacでも、まったく動作しないという事が判明しました。
これは由々しき事態だと思い、自分に対してプルリクを送って（単に考えただけだけど・・・）、この事象を問題解決しようと思い立ちました。
原因究明
原因に関しては、なんとなく想像はついていて、今回の処理は、プレビュー機能で実行ボタン（runボタン）が押された時に、プレビューエリアにiframeタグを作って、その中にhtmlソースコードとcss,javscriptをあわせて流し込むという仕様にしている仕組みなんですが、そのiframeへのアクセス方法か、何かが、firefoxブラウザでは都合が悪い書き方をしているのだと考えてます。
早速、firefoxブラウザのデバッグコンソールを開いて問題のページにアクセスしてみると・・・
エラーは出ていないようだ。
該当箇所のプログラムをわかりやすく書くとこんな感じ。
iframe = document.createElement("iframe");
document.body.appendChild(iframe);
var ifdoc = iframe.contentDocument || iframe.contentWindow.document;
ifdoc.body.innerHTML = "<div>hoge-hoge</div>";
確かにこのまま実行しても、firefoxブラウザでは、うんともすんとも動かない。
でも、ifdocをconsole.logで中身を表示してみると、オブジェクトは認識できているようだ。
とりあえず、google先生に質問してみると、海外のサイトにその答えがありました。
https://stackoverflow.com/questions/7828502/cannot-set-document-body-innerhtml-of-iframe-in-firefox
無事解決
firefoxでiframeの中のデータを書き換える時に、iframeオブジェクトに対してopen,closeのフラグアクセスをして上げる必要があったようです。
したがって、以下のようにコードを変更。
iframe = document.createElement("iframe");
document.body.appendChild(iframe);
var ifdoc = iframe.contentDocument || iframe.contentWindow.document;
ifdoc.open();
ifdoc.close();
ifdoc.body.innerHTML = "<div>hoge-hoge</div>";
なんと、これだけで、問題なく動作するようになりました。
こうした地味に細かいクロスブラウザ問題に対応するのも、とても重要なことだと改めて認識することができました。
よく頑張ったな、オレ、今日はビール飲んでもいいよ・・・と自分に言ってみた。
