网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 邮件系统 | 网络安全 | 认证考试 | 系统进程
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 网页制作 > Javascript
网页制作:Dreamweaver教程,FrontPages教程,Javascript教程,HTML教程,CSS教程,心得技巧,DHTML教程,网页特效,Discuz!论坛
本月文章推荐
.浅谈JavaScript中面向对象技术的.
.Javascript实例教程(9) 随机显示.
.增加javascript的trim函数.
.几行代码轻松搞定网页的简繁转换.
.javascript进行客户端数据的校验.
.使用javascript函数完美控制页面.
.在b/s开发中经常用到的javascrip.
.精美JavaScript日历代码(带农历.
.使用Javascript制作声音按钮.
.将金额小写转化成汉字大写的实现.
.js技巧收集(200多个).
.Javascript实例教程(11) 隐藏scr.
.Javascript脚本:Location对象.
.网页中Javascript代码的应用方式.
.深入理解Javascript闭包(closure) .
.125个常用javascript语句.
.Javascript利用闭包循环绑定事件.
.Javascript实例教程(8) 检验表单.
.JavaScript学习笔记(4)表格排序.
.JavaScript模拟ACDSEE简单功能.

利用搜索引擎引用来高亮页面关键字

发表日期:2006-2-23


    当我们在使用大多数的网页搜索引擎的"网页快照"功能时,他们都会在返回的快照页面中加入关键字高亮的功能。这将非常方便我们查找网页中被检索的内容,其中google快照的关键字高亮还融入了分词功能,不同的词着以不同的颜色。可是由于%!#^*&$!的原因,google的网页快照非常的不稳定,那么我们就自己来加上这个关键字高亮功能吧。

    如下图,当我们在google中搜索了关键字:apache asp.net后的结果:

GoogleResult.png

   点击结果的连接并导航到我们自己的页面后,如果我们加以如下关键字高亮,是否会对用户快速查找和定位页面感兴趣的内容,提供方便呢?

HighlightText.gif

    按么我们来仔细的看看,可是IE中的地址明明是:http://birdshome.cnblogs.com/archive/2005/11/17/Apache.html,那么怎么能在页面中高亮由搜索引擎检索的关键字呢?这里我们是利用了document的referrer属性来获取搜索引擎类型和关键字信息的。比如上例中,document.referrer属性就为:http://www.google.com/search?hl=zh-CN&newwindow=1&q=apache+asp.net&btnG=%E6%90%9C%E7%B4%A2&lr=lang_zh-CN%7Clang_zh-TW。我们通过JavaScript分析出指定搜索引擎的关键字,再操作页面DOM对象就实现了高亮的功能。不过对于较长的连续中文关键字,这种客户端高亮方案是不可能提供分词功能的,也算是美中不足了。

    具体实现当前页面被检索关键字高亮的代码如下,放入页面的document.body.onload事件中调用就行了:) function FriendlyDisplayForSearch()
{
    var url = new UrlBuilder(document.referrer);
    if ( url.m_Success )
    {
         var host = url.m_Host.toLowerCase();
         if ( host.indexOf('.google.') != -1 )
         {
             var keywords = url.GetValue('q', 'UTF8');
             if ( keywords )
             {
                  var ht = new HighlightText();
                  ht.Execute(keywords);
             }
         }
         else if ( host.indexOf('.baidu.') != -1 )
         {
       
         }   
    }  
}// 由于编码和使用频率的关系,目前只做了google搜索引擎

function HighlightText(range)
{
    if ( range )
    {
         this.m_Range = range;
    }
    else
    {
         this.m_Range = document.body.createTextRange();
    }    
    this.m_Keyword = '';
   
    this.toString = function()
    {
         return '[class HightlightText]';
    };      
}

HighlightText.prototype.Execute = function(keyword)
{
     if ( keyword )
     {
          this.m_Keyword = keyword;
     }
     if ( this.m_Range && this.m_Keyword )
     {
         var separater = ' ';
         if ( this.m_Keyword.indexOf(' ') == -1 )
         {
              separater = '+';
         }  
         var keywords = this.m_Keyword.split(separater);
         var bookmark = this.m_Range.getBookmark();            
         for ( var i=0 ; i < keywords.length ; ++i )
         {
             var keyword = keywords[i];
             if ( keyword && keyword.length > 1 )
             {
                 while(this.m_Range.findText(keywords[i]))
                 {
                      this.m_Range.execCommand('ForeColor', 'false', 'highlighttext');
                      this.m_Range.execCommand('BackColor', 'false', 'highlight');
                      this.m_Range.collapse(false);
                 }
                 this.m_Range.moveToBookmark(bookmark);
             }
         }
     }
}

上一篇:用JavaScript脚本将当地时间转换成其它时区 人气:13244
下一篇:Javascript脚本实现静态网页加密 人气:10694
浏览全部搜索引擎的内容 Dreamweaver插件下载 网页广告代码 祝你圣诞节快乐 2009年新年快乐