2014年4月24日木曜日

ページを開いたときに自動的に目次を付与する - 準備編(2) - Bloggerの記事に目次をJavaScriptで自動的に付与する

ラベル: 「Bloggerの記事に目次をJavaScriptで自動的に付与する」シリーズ, Blogger, JavaScript, 目次

この記事は「そうだ！Bloggerの記事に目次を付けよう！」から始まる一連の「Bloggerの記事に目次をJavaScriptで自動的に付与する」シリーズの構成記事です。
記事一覧はページ下部の「Bloggerの記事に目次をJavaScriptで自動的に付与するシリーズ」よりどうぞ。

この「Bloggerの記事に目次をJavaScriptで自動的に付与する」の一つのコンセプトとして、

個別の記事に目次を設定しなくても、自動的にすべての記事に目次を付与できる。

があります。

そこでページが開かれたときに自動的に JavaScript を実行する方法を検討しました。
結論からすると、最も簡単にページが開かれたときに JavaScript を実行する方法として、<head>要素内に直接 JavaScript を記載する方法があります。

ソースコード(test.html) :

<html>
<head>
<title>test page</title>
<script type="text/javascript">
<!--
    alert("page open!");
//-->
</script>
</head>
<body>
<h1>TEST.</h1>
</body>
</html>

実行結果：

ページを開いたときに実行される

この方法なら<head>内に目次生成用の JavaScript を記載するだけなので、面倒な設定や他の JavaScript との相互作用を考慮しなくてよさそうですね。

と思って処理を記載していたところ、<head>内で JavaScript を実行してしまうと、まだ<body>以下の内容が読み込まれていないために、<body>中に記載されている要素を取得できませんでした。

そこで、処理対象の<body>内の要素の下に JavaScript を記載して実行することにしました。

検証：

<head>内で実行した場合

ソースコード

<html>
<head>
<title>test page</title>


<script type="text/javascript">
<!--
    // ページ読み込み時に目次の生成・挿入処理を実行
    generateIndex();


    // 目次の生成・挿入処理
    function generateIndex() {
        // 投稿本文が格納されている div 要素を発見し、目次を挿入する
        var divs = document.getElementsByTagName("div");
        alert(divs.length);
    }
//-->
</script>


</head>
<body>
<h1>TEST.</h1>
<div id="post-body-1234">
記事本文です。
</div>


</body>
</html>

結果

<head>内に JavaScript を記載し、<head>内で実行した場合、まだ<body>が読み込まれていないため、この時点で実行した JavaScript では <div>の要素数が 0 として取得されてしまいます。（<body>には<div>が 1 つ記載されているにも関わらず。）

取得できた <div> 要素数：0

次に、<div>要素の後に JavaScript を記載した場合はどうなるのでしょうか。
実際に見てみましょう。

<body>内の処理対象の要素の直後で実行した場合

ソースコード

<html>
<head>
<title>test page</title>
</head>
<body>
<h1>TEST.</h1>
<div id="post-body-1234">
記事本文です。
</div>


<script type="text/javascript">
<!--
    // ページ読み込み時に目次の生成・挿入処理を実行
    generateIndex();


    // 目次の生成・挿入処理
    function generateIndex() {
        // 投稿本文が格納されている div 要素を発見し、目次を挿入する
        var divs = document.getElementsByTagName("div");
        alert(divs.length);
    }
//-->
</script>


</body>
</html>