开发学院网页设计 JavaScript 完全基于 JavaScript 实现的分栏搜索百度和 Googl... 阅读

完全基于 JavaScript 实现的分栏搜索百度和 Google 的页面

　2010-09-14 13:38:07　来源：WEB开发网　　　

核心提示：按照惯例先给网址：http://www.i874.cn/baigoogledu.htm，然后是集成到 Maxthon 的搜索框调用方式：http://www.i874.cn/baigoogledu_search.htm?w=%us ，完全基于 JavaScript 实现的分栏搜索百度和 Google 的页面，%us 代

按照惯例先给网址：http://www.i874.cn/baigoogledu.htm，然后是集成到 Maxthon 的搜索框调用方式：http://www.i874.cn/baigoogledu_search.htm?w=%us ，%us 代表是 utf-8 编码的。

之前一直在用百度Google一起搜（http://www.baigoogledu.com/），但是有些搜索内容如 xp_cmdshell 、抵制家乐福等词条不能搜索，提示如下：“非法信息监控拦截系统提醒您：由于您提交的内容中或访问的内容中含有不允许的关键词，本次操作无效，系统已记录您的IP及您提交的所有数据。请注意，不要提交任何违反国家规定的内容！本次拦截的相关信息为：抵制家乐福”。

上面这个原因颇让我不爽，首先，本身你一个调用百度和Google的网页不可能用到 SQL Server，除非是记录了用户的搜索内容，因此没必要为了防止 SQL 注入攻击而记录诸如 xp_cmdshell 这样的词条，其次，是否屏蔽抵制家乐福这样的词条由国家相关部门和百度Google等来决定，而不应该由你来决定，事实上抵制家乐福在百度Google上已经可以搜索了。

基于上述原因，我决定自己写一个类似功能的网页。起初考虑到用 ASP.NET 来写，但是着实有些大材小用，想到只是把关键字原封不动的传递给百度和Google，用 JavaScript 实现可以节约大量的服务器资源。

起先想的很简单，一个页面作为首页，其中有一个 <form> ，里面是一个文本框和一个提交按钮，用 get 方式把搜索关键字提交到另外一个框架页，框架页上面显示另外一个头页，frame 的 id 为 head，下面的左边是百度搜索，frame 的 id 为 baidu，右边是Google搜索，frame 的 id 为 google，<head> 里有一段脚本，具体解释参看注释：

window.onload=function(){ 　　varurl=location.toString().split('?'); //获取url的网址部分和查询部分　　varw='',p=1; 　　if(url.length==2){ 　　　　url=url[1].split('&'); //获取每个查询　　　　w=url[0].substring(2); //为了简单，查询格式为?w=关键字&p=页码，因此直接从第2个字符取到最后就是全部值了　　　　if(url.length==2) 　　　　　　p=parseInt(url[1].substring(2)); //如果包含页码部分则取出页码，否则页码默认为1 　　} 　　if(w=='') 　　　　location='baigoogledu.htm'; //如果搜索关键字为空则返回首页　　varhead=document.getElementById('head'); 　　varbaidu=document.getElementById('baidu'); 　　vargoogle=document.getElementById('google'); //获取3个frame 　　head.src='baigoogledu_head.htm?w='+w+'&p='+p.toString(); //设置头页面的url 　　p=(p-1)*10; //搜索引擎的页数是通过从第n条开始显示计算的，默认每页10条，如第1页则从0开始，第2页从10开始，第3页从20开始，因此要转换　　google.src='http://www.google.cn/search?q='+w+'&start='+p.toString(); 　　baidu.src='http://www.baidu.com/s?ie=utf-8&wd='+w+'&pn='+p.toString(); //设置搜索引擎frame的url，因为网页使用utf-8编码，故中文和符号搜索关键词也使用utf-8编码，因此要在百度搜索中增加ie=utf-8 }