“文字选中分享到” 简单实现

通常我们在阅读新浪博客的时候，当选中文章中的一段文字，会出现下面这一现象：

选中文字后，当我们抬起鼠标会出现一个新浪的分享按钮，这有利于我们很方便的将有用的文字信息分享到微博。那么这种效果是如何实现的？

首先想的是，如何把用户选中的文字保存下来呢？

在 javascript 中，它为我们提供 document.selection.createRange().text 这样一个方法，它返回的是一个字符串，但是只适用 ie。在其他的浏览器，则是用的 window.getSelection().toString()　。

于是我们封装这个函数，以便兼容多个浏览器：

function textSelect(){　　
　　if(document.selection){　// ie
　　　　return document.selection.createRange().text;
　　}
　　else{ // 标准
　　　　return window.getSelection().toString();
　　}
}

文字选中后，鼠标抬起分享按钮的出现？

我们在 html 中定义一个绝对定位的分享层：

<div id=”share” style=”position:absolute;display:none;”><img src=”../images/share.gif”></div>

接着，将鼠标的坐标点赋给分享层并显示这个层，在这里我们做了一个选中文字长度的条件限制，如果文字长度大于 10, 则分享层才显示。

oP.onmouseup = function(ev) {　　　　
    var oEvent = ev || event,
        left = oEvent.clientX,
        top = oEvent.clientY;　　　　
    if (textSelect().length > 10) {　　　　　　
        setTimeout(function(ev) {　　　　　　　　
                oShare.style.display = ”block”;　　　　　　　　
                oShare.style.left = left + ”px”;　　　　　　　　
                oShare.style.top = top + ”px”;　　　　　　
            }, 100) //100ms 后出现，防止在 IE 下触发太快，影响选中文字的范围

        　　　　
    }　　　　　
    else {　　　　　　
        oShare.style.display = ”none”;　　　　
    }　　
}

最后，如何把选中的文字带到微博发布框？

当我们点击分享按钮时，网页会跳到分享发布框页面，这乍一看是个很复杂的问题，的确，有些东西不知道就算你想破脑袋也无从入手。在这里，新浪给我们提供了一个分享接口，将分享发布框页面的网址拆分如下：

http://v.t.sina.com.cn/share/share.php?searchPic=false&title=‘+textSelect()+‘&url=window.location.href

红色部分是新浪分享发布页面的网址及相关参数，深蓝色部分是你的分享文字，绿色部分是你需要分享的网页地址（博文地址）。

于是就有：

oShare.onclick=function(){  
　　　　window.open(‘http://v.t.sina.com.cn/share/share.php?　　searchPic=false&title=’+textSelect()+’&url=window.location.href’);
　　}

以上就是分享文字效果的步骤讲解。

demo 的完整代码如下：

html:

<p id=”p1″> 本书从最早期 Netscape 浏览器中的 JavaScript 开始讲起，直到当前它对 XML 和 Web 服务的具体支持，内容主要涉及 JavaScript 的语言特点、JavaScript 与浏览器的交互、更高级的 JavaScript 技巧，以及与在 Web 应用程序中部署 JavaScript 解决方案有关的问题，如错误处理、调试、安全性、优化 / 混淆化、XML 和 Web 服务，最后介绍应用所有这些知识来创建动态用户界面。” 本书作者显然非常了解读者的需要，切中要害，信息密集。单单对客户端通信、Web 服务、正则表达式、DOM、XML 处理等现代 JavaScript 技术的详细讲解，就已经物超所值。”</p>
<div id=”share” style=”position:absolute;display:none;”><img src=”../images/share.gif”></div>

javascript:

(function() {　　
    function textSelect() {　　 // 核心函数
        　　　　
        if (document.selection) {　 // ie
            　　　　　　
            return document.selection.createRange().text;　　　　
        }　　　　
        else { // 标准
            　　　　　　
            return window.getSelection().toString();　　　　
        }　　
    }
    　　
    var d = document,
        oP = d.getElementById(“p1″),
        oShare = d.getElementById(“share”);　　
    oP.onmouseup = function(ev) {　　　　
        var oEvent = ev || event,
            left = oEvent.clientX,
            top = oEvent.clientY;　　　　
        if (textSelect().length > 10) {　　　　　　
            setTimeout(function(ev) {　　　　　　　　
                    oShare.style.display = ”block”;　　　　　　　　
                    oShare.style.left = left + ”px”;　　　　　　　　
                    oShare.style.top = top + ”px”;　　　　　　
                }, 100) //100ms 后出现，防止在 IE 下触发太快，影响选中文字的范围

            　　　　
        }　　　　　
        else {　　　　　　
            oShare.style.display = ”none”;　　　　
        }　　
    }　　
    oShare.onclick = function(ev) { // 阻止冒泡函数　　
        var oEvent = ev || event;　　　　
        oEvent.cancelBubble = true;　　　　
        window.open('http://v.t.sina.com.cn/share/share.php?searchPic=false&title=' + textSelect() + '&url=http://baike.baidu.com/view/605930.htm');
        // 这里的百度百科的网址，如果在服务器网页可以使用 window.location.href　
    }

    document.onclick = function() {　　　　　
        oShare.style.display = ”none”;　　
    }
})();