目次フレームを自動生成する
Javascript で HTML 文書中の h1 ～ h6 を抜き出して、目次を作成するスクリプトを作成しました。見出し要素に id が振られていなければ自動生成します。自動生成した場合にやたらと "-0" が付くのはご愛嬌…。
2010.01.06 10:40 追記
自動生成した id の階層がおかしかったのを修正したものはこちら
とりあえず、Google Chrome 3.0.195.38 と IE 8 で動作確認しました。あんまりきれいじゃないです。
さらに、CSS で目次部分を左側のフレームっぽく表示させるようにしています。なんちゃって擬似フレーム。これも動作確認環境は同じ。
2009.12.22 22:50 追記
Firefox 3.5 で確認したところ、目次が全部 "undefined" ってなっちゃってました。
Firefox は Element.innerText って使えないんでしたな… とりあえず、Element.textContent を優先的に使うように修正してみました。
サンプルの HTML / toc.js / toc.css
HTML 側では、toc.js と toc.css を読込むだけです。
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8"/> <meta http-equiv="content-script-type" content="text/javascript"/> <meta http-equiv="content-style-type" content="text/css"/> <link href="toc.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="toc.js"></script> <!-- 省略… --> </head> <body> <h1>1章</h1> <h2>1章-1節</h2> <h3>1章-1節-1項</h3> <!-- 省略… --> </body> </html>
自動生成する内容は、若干カスタマイズできます。toc.js を読込んだより下の行で以下のように書けば。
<script type="text/javascript">//<![CDATA[ toc.listtag = "ol"; // 番号つきリストに toc.tocId = "tableOfContents"; // 目次部分の id を別の値に toc.defaultIdPrefix = "section"; // 見出し要素の自動生成 id のプリフィックス //]]> </script>