一个网站的诞生- 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/