700字范文 > [转]JavaScript自动生成博文目录导航

[转]JavaScript自动生成博文目录导航

时间：2021-05-19 17:38:35

转自：/xdp-gacl/p/3718879.html

我们在写博客的时候，如果博文里面有目录，会给人结构清晰、一种一目了然的感觉，看目录就知道这篇博文要讲解的内容，并且点击目录标题就可以跳转到具体的内容，这样园友们在看博客的时候就可以很方便地浏览自己感兴趣的内容，但是遗憾的是博客园不支持博文目录的生成，好像也有园友给博客园提建议，希望能够像CSDN那样能够自动生成博文目录，但是不知道是什么原因，博客园一直都没有把这个功能加上去，既然没有，那我就自己做吧，研究了2天，总算是按照自己的设想做出来了，最终效果如下：

下面来介绍一下这个小工具的实现。

一、功能描述

这个小工具要实现的核心功能只有两个：

1.自动生成博文目录。

2.点击目录标题定位到标题对应的具体内容，就像使用word生成的目录那样。

1.1、自动生成博文目录

小工具的第一个核心功能，就是通过代码自动抽取标题，然后再包装一下插入文档中。基本实现原理：首先要求博主在写博文的时候，将主标题和次级标题用 HTML标签中的 title tag（如：h1、h2、h3...）包起来；

比如"1.1、自动生成博文目录"这个次级标题现在是段落的形式

将"1.1、自动生成博文目录"设置成"标题3"

然后通过 JS 代码遍历整个包含博文正文的 <div>，过滤出这些标签，再把它们组装成自定义列表的形式，再插入到HTML文档中，如下：

1<dl>2 <dt>一、JAVA流式输入/输出原理</dt>3 <dt>二、输入输出流分类</dt>4 <dt>三、节点流和处理流</dt>5 <dd>3.1.节点流类型</dd>6 <dd>3.2.处理流类型</dd>7 <dt>四、InputStream(输入流)</dt>8 <dd>4.1.InputStream的基本方法</dd>9 <dt>五、OutputStream(输出流)</dt>10 <dd>5.1.OutputStream的基本方法</dd>11 <dt>六、Reader流</dt>12 <dd>6.1.Reader的基本方法</dd>13 <dt>七、Writer流</dt>14 <dd>7.1.Writer的基本方法</dd>15 <dt>八、节点流讲解</dt>16 <dt>九、处理流讲解</dt>17 <dd>9.1.第一种处理流——缓冲流(Buffering)</dd>18 <dd>9.2.第二种处理流——转换流</dd>19 <dd>9.3.第三种处理流——数据流</dd>20 <dd>9.4.打印流——Print</dd>21 <dd>9.5. 对象流——Object</dd>22 <dt>十、IO流总结</dt>23</dl>

如果不加任何样式，它在浏览器中的默认显示效果如下：

1.2、点击目录标题定位到标题对应的具体内容

常规实现方式：使用HTML的锚点链接

锚点也可以理解成为一种超链接，只不过它是网页内部的超链接

比如我们有一个网页很长很长，而且里面的内容，可以分为N个部分。这样的话，我们就可以在网页的顶部设置一些锚点，这样便可以方便浏览者点击相应的锚点，到达本页内相应的位置，而不必在一个很长的网页里自行寻找。

范例：使用HTML的锚点链接定位到具体的内容

1 <html>2 <head>3 <title>使用HTML的锚点链接定位到具体的内容</title>4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />5 </head>6 <body>7<h1>目录导航</h1>8<dl>9 12 <dt><a href="#title0">一、JAVA流式输入/输出原理</a></dt>13 <dt><a href="#title1">二、输入输出流分类</a></dt>14 <dt><a href="#title2">三、节点流和处理流</a></dt>15 <dd><a href="#title3">3.1.节点流类型</a></dd>16 <dd><a href="#title4">3.2.处理流类型</a></dd>17 <dt><a href="#title5">四、InputStream(输入流)</a></dt>18 <dd><a href="#title6">4.1.InputStream的基本方法</a></dd>19 <dt><a href="#title7">五、OutputStream(输出流)</a></dt>20 <dd><a href="#title8">5.1.OutputStream的基本方法</a></dd>21 <dt><a href="#title9">六、Reader流</a></dt>22 <dd><a href="#title10">6.1.Reader的基本方法</a></dd>23 <dt><a href="#title11">七、Writer流</a></dt>24 <dd><a href="#title12">7.1.Writer的基本方法</a></dd>25 <dt><a href="#title13">八、节点流讲解</a></dt>26 <dt><a href="#title14">九、处理流讲解</a></dt>27 <dd><a href="#title15">9.1.第一种处理流——缓冲流(Buffering)</a></dd>28 <dd><a href="#title16">9.2.第二种处理流——转换流</a></dd>29 <dd><a href="#title17">9.3.第三种处理流——数据流</a></dd>30 <dd><a href="#title18">9.4.打印流——Print</a></dd>31 <dd><a href="#title19">9.5. 对象流——Object</a></dd>32 <dt><a href="#title20">十、IO流总结</a></dt>33</dl>34<hr/>35<div style=" width:100%;height:150px;">36 39 <h2 id="title0" name="title0">一、JAVA流式输入/输出原理</h2>40</div>41<div style=" width:100%;height:150px;">42 <h2 name="title1" id="title1">二、输入输出流分类</h2>43</div>44<div style=" width:100%;height:150px;">45 <h2 name="title2" id="title2">三、节点流和处理流</h2>46 <h3 name="title3" id="title3">3.1.节点流类型</h3>47 <h3 name="title4" id="title4">3.2.处理流类型</h3>48</div>49<div style=" width:100%;height:150px;">50 <h2 name="title5" id="title5">四、InputStream(输入流)</h2>51 <h3 name="title6" id="title6">4.1.InputStream的基本方法</h3>52</div>53<div style=" width:100%;height:150px;">54 <h2 name="title7" id="title7">五、OutputStream(输出流)</h2>55 <h3 name="title8" id="title8">5.1.OutputStream的基本方法</h3>56</div>57<div style=" width:100%;height:150px;">58 <h2 name="title9" id="title9">六、Reader流</h2>59 <h3 name="title10" id="title10">6.1.Reader的基本方法</h3>60</div>61<div style=" width:100%;height:150px;">62 <h2 name="title11" id="title11">七、Writer流</h2>63 <h3 name="title12" id="title12">7.1.Writer的基本方法</h3>64</div>65<div style=" width:100%;height:150px;">66 <h2 name="title13" id="title13">八、节点流讲解</h2>67</div>68<div style=" width:100%;height:150px;">69 <h2 name="title14" id="title14">九、处理流讲解</h2>70 <h3 name="title15" id="title15">9.1.第一种处理流——缓冲流(Buffering)</h3>71 <h3 name="title16" id="title16">9.2.第二种处理流——转换流</h3>72 <h3 name="title17" id="title17">9.3.第三种处理流——数据流</h3>73 <h3 name="title18" id="title18">9.4.打印流——Print</h3>74 <h3 name="title19" id="title19">9.5. 对象流——Object</h3>75</div>76<div style=" width:100%;height:150px;">77 <h2 name="title20" id="title20">十、IO流总结</h2>78</div>79<div style="height:130px;"> </div>80<div style="height:130px;"> </div>81<div style="height:130px;"> </div>82 </body>83 </html>

这是使用HTML锚点链接的解决方案，也是一种常规的实现方式，这种方案我觉得用户体验不怎么好，跳转到具体内容的时候速度太快了，没有一种平滑过度的效果。

JavaScript实现方式

实现原理：首先通过调用 DOM 方法，判断出浏览器滚动条（scroll bar）的当前位置，记为 currentPos；然后计算出目标标题（target title）的距页面顶端的距离，记为 finalPos；最后通过一定的算法实现平滑过度。

二、源代码

下面是这个JS工具的相关源代码：

2.1 js代码

/*功能：生成博客目录的JS工具测试：IE8，火狐，google测试通过孤傲苍狼-5-11*/var BlogDirectory = {/*获取元素位置，距浏览器左边界的距离（left）和距浏览器上边界的距离（top）*/getElementPosition:function (ele) { var topPosition = 0;var leftPosition = 0;while (ele){ topPosition += ele.offsetTop;leftPosition += ele.offsetLeft; ele = ele.offsetParent;} return {top:topPosition, left:leftPosition}; },/*获取滚动条当前位置*/getScrollBarPosition:function () {var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;return scrollBarPosition;},/*移动滚动条，finalPos 为目的位置，internal 为移动速度*/moveScrollBar:function(finalpos, interval) {//若不支持此方法，则退出if(!window.scrollTo) {return false;}//窗体滚动时，禁用鼠标滚轮window.onmousewheel = function(){return false;};//清除计时if (document.body.movement) { clearTimeout(document.body.movement); } var currentpos =BlogDirectory.getScrollBarPosition();//获取滚动条当前位置var dist = 0; if (currentpos == finalpos) {//到达预定位置，则解禁鼠标滚轮，并退出window.onmousewheel = function(){return true;}return true; } if (currentpos < finalpos) {//未到达，则计算下一步所要移动的距离dist = Math.ceil((finalpos - currentpos)/10); currentpos += dist; } if (currentpos > finalpos) { dist = Math.ceil((currentpos - finalpos)/10); currentpos -= dist; }var scrTop = BlogDirectory.getScrollBarPosition();//获取滚动条当前位置window.scrollTo(0, currentpos);//移动窗口if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部，则解禁鼠标滚轮，并退出{window.onmousewheel = function(){return true;}return true;}//进行下一步移动var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")"; document.body.movement = setTimeout(repeat, interval); },htmlDecode:function (text){var temp = document.createElement("div");temp.innerHTML = text;var output = temp.innerText || temp.textContent;temp = null;return output;},/*创建博客目录，id表示包含博文正文的 div 容器的 id，mt 和 st 分别表示主标题和次级标题的标签名称（如 H2、H3，大写或小写都可以！），interval 表示移动的速度*/createBlogDirectory:function (id, mt, st, interval){//获取博文正文div容器var elem = document.getElementById(id);if(!elem) return false;//获取div中所有元素结点var nodes = elem.getElementsByTagName("*");//创建博客目录的div容器var divSideBar = document.createElement('DIV');divSideBar.className = 'sideBar';divSideBar.setAttribute('id', 'sideBar');var divSideBarTab = document.createElement('DIV');divSideBarTab.setAttribute('id', 'sideBarTab');divSideBar.appendChild(divSideBarTab);var h2 = document.createElement('H2');divSideBarTab.appendChild(h2);var txt = document.createTextNode('目录导航');h2.appendChild(txt);var divSideBarContents = document.createElement('DIV');divSideBarContents.style.display = 'none';divSideBarContents.setAttribute('id', 'sideBarContents');divSideBar.appendChild(divSideBarContents);//创建自定义列表var dlist = document.createElement("dl");divSideBarContents.appendChild(dlist);var num = 0;//统计找到的mt和stmt = mt.toUpperCase();//转化成大写st = st.toUpperCase();//转化成大写//遍历所有元素结点for(var i=0; i<nodes.length; i++){if(nodes[i].nodeName == mt|| nodes[i].nodeName == st) {//获取标题文本var nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/g,"");//innerHTML里面的内容可能有HTML标签，所以用正则表达式去除HTML的标签nodetext = nodetext.replace(//ig, "");//替换掉所有的nodetext = BlogDirectory.htmlDecode(nodetext);//插入锚 nodes[i].setAttribute("id", "blogTitle" + num);var item;switch(nodes[i].nodeName){case mt: //若为主标题 item = document.createElement("dt");break;case st: //若为子标题item = document.createElement("dd");break;}//创建锚链接var itemtext = document.createTextNode(nodetext);item.appendChild(itemtext);item.setAttribute("name", num);item.onclick = function(){ //添加鼠标点击触发函数var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name")));if(!BlogDirectory.moveScrollBar(pos.top, interval)) return false;}; //将自定义表项加入自定义列表中dlist.appendChild(item);num++;}}if(num == 0) return false; /*鼠标进入时的事件处理*/divSideBarTab.onmouseenter = function(){divSideBarContents.style.display = 'block';}/*鼠标离开时的事件处理*/divSideBar.onmouseleave = function() {divSideBarContents.style.display = 'none';}document.body.appendChild(divSideBar);}};window.οnlοad=function(){/*页面加载完成之后生成博客目录*/BlogDirectory.createBlogDirectory("cnblogs_post_body","h2","h3",20);}

2.2. CSS样式代码

1 /*生成博客目录的CSS*/2 #sideBar{3font-size:12px;4font-family:Arial, Helvetica, sans-serif;5text-align:left;6position:fixed;/*将div的位置固定到距离top:50px，right:0px的位置，这样div就会处在最右边的位置，距离顶部50px*/7top:50px;8right:0px;9width: auto;10height: auto; 11 }12 #sideBarTab{13float:left;14width:30px; 15border:1px solid #e5e5e5;16border-right:none;17text-align:center;18background:#ffffff;19 }20 21 #sideBarContents{22float:left;23overflow:auto; 24overflow-x:hidden;!important;25width:200px;26min-height:108px;27max-height:460px;28border:1px solid #e5e5e5;29border-right:none; 30background:#ffffff;31 }32 #sideBarContents dl{33margin:0;34padding:0;35 }36 37 #sideBarContents dt{38margin-top:5px;39margin-left:5px;40 }41 42 #sideBarContents dd, dt {43cursor: pointer;44 }45 46 #sideBarContents dd:hover, dt:hover {47color:#A7995A;48 }

2.3.由JavaScript动态生成的HTML代码结构如下

1 <div id="sideBar" class="sideBar">2<div id="sideBarTab">3 <h2>目录导航</h2>4</div>5<div id="sideBarContents" style="display: none;">6 <dl>7 <dt name="0">一、功能描述</dt>8 <dd name="1">1.1、自动生成博文目录</dd>9 <dd name="2">1.2、点击目录标题定位到标题对应的具体内容</dd>10 <dt name="3">二、源代码</dt>11 <dd name="4">2.1 js代码</dd>12 <dd name="5">2.2. CSS样式代码</dd>13 <dt name="6">三、JS工具的使用</dt>14 <dd name="7">3.1、后台管理的相关设置</dd>15 <dd name="8">3.2、博文标题样式设置</dd>16 <dt name="9">四、总结</dt>17 </dl>18</div>19 </div>