JavaScript:ページタイトルとURLを一か所に表示する(3) - 遅延&エラー処理追加 - URLはcanonicalから取得します

イントロダクション

前回、ページタイトルと(正規化された)URLのペアを生成する JavaScript コードへ、自動選択機能追加を追加してみました。

JavaScript:ページタイトルとURLを一か所に表示する(2) - 自動選択機能追加 - URLはcanonicalから取得します
http://upa-pc.blogspot.com/2015/03/javascript-page-title-and-canonical-url-2.html


今回は、そのコードに対して、以下の改良を行いました。

今回の改良点

ページタイトルと(正規化された)URLのペアの生成処理の実行を遅延

前回までのコードは、ページの読み込み時にページタイトルと(正規化された)URLのペアの生成処理を実施します。

それほど重い処理ではないと思いますが、ページ読み込み時の処理負荷軽減と、処理負荷の分散のために、生成処理の遅延実行処理を実装しました。

任意のミリ秒数遅延して、生成を実行します。

出力先の div 要素が存在しない場合には、処理を実行せずに終了する

前回までのコードは、ページタイトルと(正規化された)URLのペアの生成結果の出力先が無い場合には、エラー終了するコードになっていました。

通常、出力先の div 要素と、生成処理コードはペアで使用するため問題は無いとは思いますが、任意のページでのみ出力先の div 要素を用意し、コードを共通的に読み込むケースでは都合が悪いため、そのようなケースにも対応できるようにしました。

ページタイトルとURLを一か所に表示する:自動選択機能追加

前提

遅延実行

遅延実行のため、処理全体を setTimeout を使用して、指定したミリ秒後実行するようにしています。

setTimeout の第２引数に、どのくらい遅延させるのかミリ秒で指定します。
デフォルトは、5 * 1000 ミリ秒(5秒)としました。


なお、遅延実行されるまでは、「ページとURLのペアを生成中...」という文字が、ページタイトルと(正規化された)URLのペアの代わりに表示されています。

エラー処理

出力先の div 要素が存在しない場合には、可能な限り何の処理も実行したくないため、コードの先頭付近にて、出力先の div 要素が存在チェックを実施しています。

ソースコード

<div id="page_title_url_pair_box">
ページとURLのペアを生成中...
</div>
<script type="text/javascript">
<!--
    setTimeout(function () {
        /*
        link タグの ref = canonical に指定された、href を取得します

        戻り値：
        link タグの ref = canonical に指定された、href
        見つからなかった場合、null
        */
        function getCanonicalUrl() {

            var links = document.getElementsByTagName("link");
            for (var i = 0; i < links.length; i++) {
                if (links[i].rel) {
                    if (links[i].rel.toLowerCase() == "canonical") {
                        return links[i].href;
                    }
                }
            }

            return null;
        }


        var box = document.getElementById("page_title_url_pair_box");
        if (box) {
            // 元データ取得
            var page_title = document.title;
            var canonical_url = getCanonicalUrl();

            // 出力データ作成
            var output_data = document.createElement("textarea");
            output_data.setAttribute("rows", "2");
            output_data.setAttribute("style", "width:100%;");

            if (canonical_url) {
                output_data.appendChild(document.createTextNode(page_title +
                    "\r\n" +
                    canonical_url));

                // この領域がクリックされたら、全選択状態にする
                output_data.onclick = function () {
                    output_data.select();
                }
            } else {
                output_data.appendChild(document.createTextNode("error : 正規化されたURLが見つかりませんでした。" +
                    "\r\n" +
                    "ページタイトルとURLのペアの生成は行えませんでした。"));
            }

            // 画面へ出力
            box.innerHTML = "";
            box.appendChild(output_data);
        }

    }, 5 * 1000);
//-->
</script>

実行結果

ページとURLのペアを生成中...

まとめ

このように、ページタイトルと(正規化された)URLのペアを生成処理を、遅延して実行することで負荷を分散できるようになりました。

また、エラー時の処理を追加したことで、出力先の div 要素と、スクリプトコードを分離することが出来るようになりました。


このスクリプトを、Webサイトやブログへ設置することで、閲覧者の利便性を向上することが出来るはずです。

このブログ内の、他の”JavaScript”についての情報を見る

---

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質