Firefox で innerText を使えるようにする方法

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

> や < といった文字をそのままタグに入れて表示したい場合, chrome や ie では innerHTML の代わりに innerText というプロパティに値を代入します.

ですが, firefox の場合は innerText というプロパティはサポートされていません. 代わりに textContent というプロパティがサポートされています.

私の場合は, innerText の方が覚えやすくて意味的にもピンとくるので firefox でも innerText が使えるようにするサンプルを作ってみました.

SAMPLE

今回制作したサンプルはこちらです.

CODE

<!DOCTYPE html> 
<html lang="ja"> 
    <head> 
        <meta charset="utf-8"> 
        <title>Firefox で innerText を使えるようにする方法</title>
        
        <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 を使うことができます.

近々ゲーム系のそこそこ大きめのライブラリを公開予定です. よかったら遊んで下さい.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT