近日,在拜读了“绝影”博客上《疯狂的程序员》连载文章后,感触颇深,从他的文章里找了自己的人生记忆,仿佛其中的主角就是自已…..
可是,由于白天要上班,晚上回家了也很晚,没多少空闲时间看,想来想去,最后决定将文章下下来,做成txt格式放到手机上看,反正每天上下班都有差不多两个小时,够我看的了。
问题来了,如果我是用手工的方式去一页一页的复制、粘贴。。。这工作量是不是也太大了,况且自己还身为一名“程序员”,感觉总有点怪怪的。又不想上网找那种可以下载网页的软件。最后想想,反正这难度应该不大,自己动手写个小程序试试,不成功也就当是练习练习吧。
接下来,开始分析需求。其实很简单,就是输入博客的网址,然后得到当前页面当中的所有文章的超链接,再根据这个链接去读取每篇文章的内容,把内容全部显示到一个网页里,然后就只需要复制一次就可以将所有的内容copy下来了。
?
开始写代码,这里碰到了一个问题,本想一次性将所有的链接全部得到,然后通过循环的方式去读取每个链接所对应的网页内容。可是当我真正去实现的时候出现了一个无法访问的错误,打开了一个CSDN用户登录页面。不知道是什么原因,猜想是人家网站不让你这样去弄吧,也没多想。此路不行,换条路。打开其中的一个链接,看了一下结构,发现每篇文章上面都有一个链接可以查看下一篇文章的内容,既然如此那我就可以通过读取这个链接得到下一篇文章的网页了。通过不断的循环,应该可以一直不断的得到后面的网页。
?
思路理清了,就开始写代码吧
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> //获取网页内容,经过处理后将内容写入到指定的div当中 function getPage(url){ var xmlhttp = createXmlHttp(); //获取xmlhttp对象 var all_yk = document.getElementById("all_yk"); //得到用于保存网页的div if(url == null || url == "") { alert("网址不能为空!"); return; }else { xmlhttp.open("GET",url,false); xmlhttp.send(); if(xmlhttp.readyState ==4) { if(xmlhttp.status != 200) { alert("连接失败!"); return; }else { /* 这里通过xmlhttp对象读取了网页后,将内容写入到all_yk这个div当中, 这里面的内容其实就是包含所有内容的网页源代码。 由于div的样式已设置不显示,所以我们在网页是看不到的。 */ all_yk.innerHTML=xmlhttp.responseText; //这个用来提取我们需要数据,获取文章的内容就看它了 getText(); } } } } //定义一个计数器,通过此计数器,我们可以设置要访问的级数 var count=1; //从指定的div当中获取需要的数据 function getText() { var temp_yk = document.getElementById("temp_yk"); //下一页的超链接 var nextHREF; if(document.getElementById("Post.ascx_ViewPost_PreviousAndNextEntriesUp")){ /* 这里的id是通过分析网页源代码得到的,大家可以自己去查看博客上的网页源代码就知道了 得到了这个节点对象我们就可以缩小查找范围,只需要得到这个节点的第一个<a>元素的href属性 就可以获取下一篇文章的链接了,再将链接保存到变量当中,用于下一次getPage()方法的运行, 如此循环即可以不断的得到不同的文章内容 */ var nextURLS =document.getElementById("Post.ascx_ViewPost_PreviousAndNextEntriesUp"); nextHREF=nextURLS.getElementsByTagName("a")[0].getAttribute("href"); } /* *这段代码用来获取我们需要的文章内容,同样通过分析源代码,所有的文章内容都位于一个id=csdnblog_content 的div节点当中,我们只需要判断一下这个div是否存在,就知道有没有文章内容了。同理,再分析源码得知所有的文章每一段 都位于一个<p>节点当中,而且这个<p>节点都一个相同的class属性,既然如此,那么我们可以通过获取当前页面当中的所有 <p>节点,然后循环这个集合,判断其中的每一个节点的class属性是否等于“MsoNormal”,就可以得到文章的具体内容。 最后将每一段内容添加到temp_yk这个div节点当中。如此循环就可以将我们需要的内容获取到了。 */ if(document.getElementById("csdnblog_content")){ var allP = document.getElementsByTagName("p"); for(var i=0;i<allP.length;i++) { if(allP[i].className=="MsoNormal") { temp_yk.innerHTML+=allP[i].innerHTML+"<br>"; } } } /* 由于链接比较多,而且读取网页的速度不是很快,同时为避免出现假死机的现象, 我们在这里设置了读取网页级数的数量。这个数量指的是从当前网页算起,向下 读取多少次的数量。如本文是10,如果我是从第一章开始,则在读完了第10章后, 程序不在运行 */ if(count <10) { count++; //我们可以在这里设置一个标识,用来区分每一章的内容(可要,可不要) temp_yk.innerHTML+="**********************<p>"; getPage(nextHREF); } } //获取所有超链接 function getAllHref(){ var url = document.getElementById("url").value; getPage(url); //读取当前页面当中的所有内容,然后进行分析 var all_yk = document.getElementById("all_yk"); var book_contents = document.getElementById("book-contents").innerHTML; all_yk.innerHTML=book_contents; var as =document.getElementsByTagName("a"); for(var i=0;i<10;i++) { var nextUrl =as[i].getAttribute("href"); getPage(nextUrl); } } function clearURL() { document.forms["getText"].reset(); document.getElementById("all_yk").innerHTML=""; //查看动态生成的源代码 //document.write(document.documentElement.outerHTML); } //创建xmlhttp对象 function createXmlHttp() { { var xhr; if (window.ActiveXObject) // IE下创建XMLHTTPREQUEST { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) // 其他浏览器创建XMLHTTPREQUEST { xhr = new XMLHttpRequest(); } return xhr; } } </script> </head> <body style="font-size:12px;"> <form action="test.html" name="getText"> <table align="center"> <tr> <td>请输入要读取的网址:</td> </tr> <tr> <td><input type="text" id="url" size="90" name="url"><a href="#" onclick="getPage(url.value)" >读取</a> <input type="button" value="清空" onclick="clearURL()" id="clear"/></td> </tr> </table> </form> <!--用于临时保存网页内容,id名字没取好--> <div id="all_yk" style="display:none;"></div> <!--用于保存最后的结果内容,id名字没取好--> <div id="temp_yk" style="display:block;"></div> <!--临时保存下一篇文章的超链接--> <div id="a_yk" style="display:none;"></div> </body> </html>
?
弄个效果图:
?
最后说明一下,附件当中的内容只有一个网页,直接使用IE打开即可,fireFox可能支持不太好。注意:不可以将此网页部署到一个web项目当中去运行。原因是:浏览器限制了javascript的跨域访问。另外,如果设置的级数过长,或者网速比较慢,程序运行的速度会慢一点,请耐心等待一会。
附上“绝影”的博客:http://crazypro.hi.csdn.net/ 这本书还是不错,值得我们当程序员的看看
?
?
注:我现在只是一个菜鸟,还望高手多指点一二。谢谢!
?
?
JS代码有误,老报错: 网址不能为null
建议你仔细查看一下代码,我这边是没问题的!