preの中身を別ウィンドウで表示するボタンを自動的に追加する JavaScript

イントロダクション

ソースコードなどを Web ページ上に掲載する場合、インデントや改行をそのまま表示するために pre タグを使用することが良くあります。

その pre タグの内容をボタン一つで別ページで表示できると何かと便利です。
例えば、ページのデザインの制約によって、一行が長いソースコードは行の途中で折り返すように設定せざるを得ない場合であったり、pre タグの中身を装飾するようなコード(SyntaxHighlighterなど)を使用している場合には、装飾される前のコードを取得したい場合もあります。

そのような場合に使用できるよう、preの中身を別ウィンドウで表示するボタンを自動的に追加する JavaScript コードを作成してみました。

コード

以下のコードを</body>タグの直前に配置します。

※初期のコードでは、importNodeメソッドを使用して、pre 要素を新しいウィンドウに追加していましたが、Internet Explorer には importNodeメソッドがなかったため、innerHTML で pre の中身をコピーする方法に切り替えました。

<script type="text/javascript">
<!--
    // ページ内に含まれる pre の配列
    var preArray = [];

    (function () {
        
        // ページ内の pre を検出し
        // pre 要素の次に、pre の中身を新しいウィンドウで表示するためのボタンを追加する
        var obj_pre_array = document.getElementsByTagName("pre");
        for (var i = 0; i < obj_pre_array.length; i++) {

            // pre の中身を新しいウィンドウで表示するためのボタン作成
            var obj_form = document.createElement("form");
            obj_form.innerHTML = "<input type=\"button\" value=\"上記コードを新しいウィンドウで開く\" onclick=\"pre_openNewWindow_fromPreArray(" + preArray.length + ")\"/><br />";

            
            // pre の次にボタンを追加する
            insertAfter(obj_form, obj_pre_array[i]);


            // pre 要素のクローンを保持
            preArray.push(obj_pre_array[i].cloneNode(true));
        }

        /*
        指定した要素の次に新しい要素を挿入する

        newElement : 新しい要素
        referenceElement : 新しい要素の前の要素となる要素

        戻り値：挿入された要素(newElementと同じ）
        */
        function insertAfter(newElement, referenceElement) {

            return referenceElement.parentNode.insertBefore(newElement, referenceElement.nextSibling);
        }


    })();

    /*
    pre 要素を新しいウィンドウで開く

    number : ページ内の pre を保持している配列から特定の pre を参照するための番号

    */
    function pre_openNewWindow_fromPreArray(number) {

        pre_openNewWindow(preArray[number]);
    }

    /*
    pre 要素を新しいウィンドウで開く

    */
    function pre_openNewWindow(obj_pre) {

        // ウィンドウを開き、初期の html を作成
        var win = window.open();
        win.document.write("<html><head><title>コード</title></head><body></body></html>");

        // pre 要素を挿入
        win.document.body.innerHTML = "<pre>" + obj_pre.innerHTML + "</pre>";
    }
 

//-->
</script>

コードの動作としては、ページ表示時に全ての <pre> タグの下に「上記コードを新しいウィンドウで開く」ボタンを追加しています。

「上記コードを新しいウィンドウで開く」ボタンをクリックすると、新しいウィンドを開き、<pre>タグの中身を表示しています。

コード（最適化後）

上記のコードを、Closure Compiler（Googleが提供しているコード圧縮・最適化ツール）にて最適化しました。

上記コードを変更せずそのまま使用したい人は、以下のコードを使用するとファイルサイズを抑えることができます。

<script type="text/javascript">
<!--
var preArray=[];(function(){for(var a=document.getElementsByTagName("pre"),b=0;b<a.length;b++){var c=document.createElement("form");c.innerHTML='<input type="button" value="上記コードを新しいウィンドウで開く" onclick="pre_openNewWindow_fromPreArray('+preArray.length+')"/><br />';var d=a[b];d.parentNode.insertBefore(c,d.nextSibling);preArray.push(a[b].cloneNode(!0))}})();function pre_openNewWindow_fromPreArray(a){pre_openNewWindow(preArray[a])}
function pre_openNewWindow(a){var b=window.open();b.document.write("<html><head><title>コード</title></head><body></body></html>");b.document.body.innerHTML="<pre>"+a.innerHTML+"</pre>"};
//-->
</script>

結果

以下のように、pre要素の下に自動的に「上記コードを新しいウィンドウで開く」ボタンが追加されます。

そのボタンをクリックすると、新しいウィンドウで pre 要素の中身を表示します。

pre要素の下に自動的に「上記コードを新しいウィンドウで開く」ボタンが追加

新しいウィンドウで pre 要素の中身を表示

新しいウィンドウで pre 要素の中身を表示することで、元のページのデザインの制約を受けずに、pre 要素の中身を閲覧することができます。

Dr.ウーパのコンピュータ備忘録

2014年6月1日日曜日