日々のコンピュータ情報の集積と整理

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

2014年4月24日木曜日

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

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

この「Bloggerの記事に目次をJavaScriptで自動的に付与する」の一つのコンセプトとして、
  1. 個別の記事に目次を設定しなくても、自動的にすべての記事に目次を付与できる。
があります。


そこでページが開かれたときに自動的に 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>
 

実行結果:

javascript_head_direct

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

この方法なら<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 つ記載されているにも関わらず。)

javascript_head_direct_finddiv

取得できた <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>


結果

<div>要素の下に JavaScript が記載されているため、JavaScript 実行時には <div>要素の数が正しく 1 と取得できています。

javascript_body_direct_finddiv


取得できた <div> 要素数:1



以上より、このBloggerの記事に目次をJavaScriptで自動的に付与する JavaScript も記事の <div>要素の後に記載する必要があります。


次は、記事のページにのみ目次を付与する方法を検討します。

参考文献

スクリプトが実行されるタイミング - JavaScriptの基本事項 - JavaScript入門スクリプトが実行されるタイミング - JavaScriptの基本事項 - JavaScript入門
JavaScriptのプログラムはどこに書く JavaScriptJavaScriptのプログラムはどこに書く JavaScript
Javascriptの読まれるタイミングと実行のタイミング (ウップス!!なかわけ)Javascriptの読まれるタイミングと実行のタイミング (ウップス!!なかわけ)


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





関連記事

関連記事を読み込み中...

同じラベルの記事を読み込み中...
Related Posts Plugin for WordPress, Blogger...