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

2017年4月18日 780 次阅读 0 条评论 0 人点赞

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

新浪选中文字分享

新浪选中文字分享

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

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

在 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”;  
    }
})();

 

标签: 暂无
最后编辑:2017年4月18日

我就是我,是颜色不一样的烟火。

文章评论(0)