一个网站的诞生- MagicDict开发总结6 [划词 检索]

划词检索，一个好的字典网站所必须的功能。这个功能包括2部分内容，第一个部分是，在鼠标弹起的时候（MouseUp）知道鼠标的具体位置，显示一个【查询】的图标，第二个部分是，知道用户选中的词语。所有的操作都是纯JS的代码，第一次写JS，不好的地方，请高手指点鞭策。

首先，在JS里面写一句鼠标MouseUp时候，触发事件的声明

// 划词检索
document.onmouseup  =  showselect;

 这样的话，鼠标MouseUp的时候，就会触发showselect事件了。

接下来就是重头戏了，或许选中位置和选中文本。

需要说明一下的是，

iframeMode 这个标志表示划词的窗体是不是iframe。原本想支持网页内部iFrame的划词检索，不过IE6有Bug，我没有办法实现。FF可以实现iframe内部的划词。

其中的 

btnRunSearch 是一个按钮Input，开始时候是隐藏的，在划词的时候才出现在划词的位置上。如果用户按下这个按钮，就执行检索动作。

function  showselect(e) {
     if  (iframeMode  ==   true ) {
         return ; 
    }
     //  返回 selectedText 对象(FF/IE OK)
     if  (window.getSelection) {
        selectedText  =  window.getSelection().toString();
    }  else   if  (document.selection) {
        selectedText  =  document.selection.createRange().text;
    }
    document.getElementById( " btnRunSearch " ).style.display  =   " none " ;
    selectedText  =  selectedText.replace( / \s / g,  '' );
     if  (selectedText  !=   ""   &&  realSearch) {
        selectedText  =  selectedText.substring( 0 ,  20 );
        document.getElementById( " btnRunSearch " ).style.display  =   " block " ;
         if  (e  ==   null ) {
            document.getElementById( " btnRunSearch " ).style.left  =  (event.clientX  +  document.documentElement.scrollLeft)  +   " px " ;
            document.getElementById( " btnRunSearch " ).style.top  =   (event.clientY  +  document.documentElement.scrollTop)  +   " px " ;
        }  else  {
            document.getElementById( " btnRunSearch " ).style.left  =  e.pageX  +   " px " ;
            document.getElementById( " btnRunSearch " ).style.top  =   e.pageY  +   " px " ;
        }
    }
}

 这段代码在IE，FF下面可以执行。

不过如果想获得iframe里面的鼠标弹起的位置，我怎么做都完成不了。FF里面可以，不过IE里面，鼠标位置死活就是取不到，有哪位大侠可以帮忙修改一下。

function  showselectforiframe(e) {
     var  iframeid  =  document.getElementById( " iframeid " );  // iframe id
     //  返回 selectedText 对象(FF/IE OK)
     if  (iframeid.contentWindow.getSelection) {
        selectedText  =  iframeid.contentWindow.getSelection().toString();
    }  else   if  (iframeid.Document.selection) {
        selectedText  =  iframeid.Document.selection.createRange().text;
    }
    document.getElementById( " btnRunSearch " ).style.display  =   " none " ;
    selectedText  =  selectedText.replace( / \s / g,  '' );
     if  (selectedText  !=   ""   &&  realSearch) {
        selectedText  =  selectedText.substring( 0 ,  20 );
        document.getElementById( " btnRunSearch " ).style.display  =   " block " ;
         if  (e  ==   null ) {
            document.getElementById( " btnRunSearch " ).style.left  =  (event.clientX  +  document.documentElement.scrollLeft)  +   " px " ;
            document.getElementById( " btnRunSearch " ).style.top  =  (event.clientY  +  document.documentElement.scrollTop)  +   " px " ;
        }  else  {
            document.getElementById( " btnRunSearch " ).style.left  =  e.pageX  +   " px " ;
            document.getElementById( " btnRunSearch " ).style.top  =  e.pageY  +   " px " ;
        }
    }
}

新技术没有什么可怕的，有些难题，自己去做了，可能每个人都可以掌握。 Google是我的好朋友，你想要的代码，她都会找给你。。。。

 

有兴趣的写信给我 root#magicdict.com   [convert # to @ ]

或者加MSN mynightelfplayer@hotmail.com

网站地址 http://www.magicdict.com/

转载于:https://www.cnblogs.com/TextEditor/archive/2011/06/01/2065625.html