Firefox で innerText を使えるようにする方法
> や < といった文字をそのままタグに入れて表示したい場合,
chrome や ie では innerHTML の代わりに innerText というプロパティに値を代入します.
ですが, firefox の場合は innerText というプロパティはサポートされていません.
代わりに textContent というプロパティがサポートされています.
私の場合は, innerText の方が覚えやすくて意味的にもピンとくるので
firefox でも innerText が使えるようにするサンプルを作ってみました.
SAMPLE
今回制作したサンプルはこちらです.
CODE
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script>
// innerText 対応 (moz では textContent なので innerText に統一)
(function(){
var temp = document.createElement("div");
if (temp.innerText == undefined) {
Object.defineProperty(HTMLElement.prototype, "innerText", {
get: function() { return this.textContent },
set: function(v) { this.textContent = v; }
});
}
})();
window.onload = function() {
var eInnerHTML = document.getElementById("innerHTML");
var eInnerText = document.getElementById("innerText");
eInnerHTML.innerHTML = "<strong>Hello, world!</storng>";
eInnerText.innerText = "<strong>Hello, world!</storng>";
};
</script>
</head>
<body>
<h1>Firefox で innerText を使えるようにする方法</h1>
<table border=1>
<tr>
<th>innerHTML</th>
<td id="innerHTML"></td>
</tr>
<tr>
<th>innerText</th>
<td id="innerText"></td>
</tr>
</table>
</body>
</html>
TIPS
innerText が存在するかをチェックする
innerText は filed として定義されているため method のように
下記の方法でプロトタイプから存在をチェックすることができません.
if (HTMLElement.prototype.innerText == undefined) { ... }
なので一旦ダミーとしてエレメントを生成(今回はdivタグを生成していますが, 何でもいいです)してその要素の innerText があるかをチェックしています.
chrome や ie といった innerText をサポートしているブラウザであればこの if 文で弾かれるので何もしません.
firefox のみが if (temp.innerText == undefined) {…} の中身を通ることになります.
setter, getter を定義
Object.defineProperty(オブジェクト, プロパティ名, {
get: ゲッター,
set: セッター
});
で getter, setter を定義することができます.
この中で textContent を innerText でラップすることでユーザは何も意識することなく innerText を使うことができます.
近々ゲーム系のそこそこ大きめのライブラリを公開予定です. よかったら遊んで下さい.
『Firefox で innerText を使えるようにする方法』 http://t.co/1E3WuDCd
#javascript #firefox
疑問解決した！感謝！→Firefox で innerText を使えるようにする方法 http://t.co/jUNZZ6bN @phi_jpさんから
@nnk_osn なるほどわからない http://t.co/m8PlrBks
@unics914 Firefoxの場合、Element.prototypeを書き換えちゃうといいと思うぜ！ここにサンプルあたよー。> Firefox で innerText を使えるようにする方法 | TM Life http://t.co/nlrLiyHI