javascriptによる画面の値の書き換えがFireFoxだけできない場合の対処法
すこしはまったので、メモしておきます。
親の画面で「検索」ボタンを押して子画面を開き、そこで検索を行った後で、値を決定して親画面に戻るようなWebアプリケーションを作成しています。
親画面に戻る際、親画面に決定した結果を描画し、その後、子画面をCloseしているのですが、IE、Chromeでは値の反映がうまくいくものの、FireFoxだけ、反映されない。。という現象です。
値の書き換えはjavascriptで行っているのですが、その指定の仕方が問題でした。
「window.opener」で親画面を指定し、etElementByIdで変更箇所を指定しているのですが、
window.opener.document.getElementById("AAAAAA").innerText = "aaaaaa";
という書き方では、FireFoxでは書き換えがうまくいきませんでした。
FireFoxの場合は、
window.opener.document.getElementById("AAAAAA").textContent = "aaaaaa";
のようにする必要があります。
つまり、FireFoxでは、innerTextは使えず、innerContentを使う必要があるということです。
そのため、userAgentを判定して、FireFoxの場合はtextContentを利用しましょう。
ただ、判定を入れない方法もあり、
window.opener.document.getElementById("AAAAAA").textHTML = "aaaaaa";
を使えば、クロスブラウザで1つの記述方法で対応が可能です。
まとめると、
innerText | textContent | innerHTML | |
IE | ○ | × | ○ |
Firefox | × | ○ | ○ |
Chrome | ○ | ○ | ○ |
Opera | ○ | ○ | ○ |
のようになるようです。
「いろいろなブラウザではうまくいくのに、FireFoxだけうまくいかない!」という場合は、上記の記述を確認してみても良いかと思います。
タグ:firefox, javascript