js实现选中页面文字将其分享到新浪微博


Posted in Javascript onNovember 05, 2015

一、功能简述
正是微博如火如荼的时节,其中各个微博的分享功能是网站推广产品的好东东啊,此时如何方便快捷的使用微博的分享功能就显得比较重要了。我的站点每篇文章的底部有一些分享的链接:

js实现选中页面文字将其分享到新浪微博

不过我觉得这些分享基本上就是聋子的耳朵——摆设。除非这篇文章惊天地、泣鬼神,痛彻心扉,穿越前世今生。但是,如果有更加方便快捷的分享方式,这种冷淡得让人结冰的场面或许就不会经常出现。
一般翻译软件都有划词翻译功能,例如有道桌面词典的桌面划词翻译功能:

js实现选中页面文字将其分享到新浪微博 

启用后,随便选中那个软件的一段文字,就会出现类似这样子的浮动提示框:

js实现选中页面文字将其分享到新浪微博

在web页面上,我们也是可以实现类似的效果的:划词→显示提示→分享。这就是本文要展示的内容。
 
二、效果与demo
demo页面的文字是我点兵点将随机找的篇博客内容,纯粹示例。随便选择一段文字,结果就会出现个新浪的怪眼睛logo,如下图:

js实现选中页面文字将其分享到新浪微博

然后,点击那个晃啊晃的猥琐的眼睛,就实现了选中文字分享到新浪微博的功能啦——会打开个新页面——如下效果:

js实现选中页面文字将其分享到新浪微博

是不是分享起来很简单很方便啊!
三、方法与代码
选中即分享的功能看上去比较高级,其实实现是相当简单的。其中的会让人头大,一般人也不感兴趣的原理这里就直接跳过。这个js文字选中后分享到新浪 微博的功能我简单的封装了下,方法名是:$sinaMiniBlogShare,当然,您不喜欢可以换掉,甚至不要,此方法完整代码如下:

var $sinaMiniBlogShare = function(eleShare, eleContainer) { 
  var eleTitle = document.getElementsByTagName("title")[0]; 
  eleContainer = eleContainer || document; 
  var funGetSelectTxt = function() { 
    var txt = ""; 
    if(document.selection) { 
      txt = document.selection.createRange().text;  // IE 
    } else { 
      txt = document.getSelection(); 
    } 
    return txt.toString(); 
  }; 
  eleContainer.onmouseup = function(e) { 
    e = e || window.event; 
    var txt = funGetSelectTxt(), sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; 
    var left = (e.clientX - 40 < 0) ? e.clientX + 20 : e.clientX - 40, top = (e.clientY - 40 < 0) ? e.clientY + sh + 20 : e.clientY + sh - 40; 
    if (txt) { 
      eleShare.style.display = "inline"; 
      eleShare.style.left = left + "px"; 
      eleShare.style.top = top + "px"; 
    } else { 
      eleShare.style.display = "none"; 
    } 
  }; 
  eleShare.onclick = function() { 
    var txt = funGetSelectTxt(), title = (eleTitle && eleTitle.innerHTML)? eleTitle.innerHTML : "未命名页面"; 
    if (txt) { 
      window.open('http://v.t.sina.com.cn/share/share.php?title=' + txt + '→来自页面"' + title + '"的文字片段&url=' + window.location.href);   
    } 
  }; 
};

可以看到$sinaMiniBlogShare方法有两个参数,eleShare和eleContainer,其中,前一个参数是必须的,指的是文 字选中后出现的浮动层元素(在本文demo中就是新浪眼睛图标);后面一个参数指文字选择的容器元素,可选参数,如果不设置则指document元素,也 就是整个页面文字选中都会触发分享的功能。
假设新浪微博分享图标的HTML如下:

<img id="imgSinaShare" class="img_sina_share" title="将选中内容分享到新浪微博" src="http://simg.sinajs.cn/blog7style/images/common/share.gif" />

则直接:

$sinaMiniBlogShare(document.getElementById("imgSinaShare"));

就实现了选中文字分享到新浪微博的功能了。
这里的方法没有兼容性问题,IE之流,firefox或是chrome浏览器可以轻松分享;另外,方法原生的javascript代码,不依赖于任何库,所以,只要浏览器不禁用javascript,哪里都可以使用,真可谓方便快捷,无孔不入,网页开发,必备良药。

其实,此方法不仅支持新浪微博,支持企鹅微博(腾讯微博),狐狸微博(搜狐微博),也是可以的,只要根据各个微博分享页面的API地址,将window.open()中的地址换换就ok了。
以上就是js实现选中页面文字将其分享到新浪微博的方法,时间仓促,技术有限,欢迎多多指正,大家共同进步。

Javascript 相关文章推荐
JavaScript静态的动态
Sep 18 Javascript
js树形控件脚本代码
Jul 24 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
Oct 27 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
jquery操作select取值赋值与设置选中实例
Feb 28 Javascript
浅谈Vue数据响应思路之数组
Nov 06 Javascript
Element-UI中Upload上传文件前端缓存处理示例
Feb 21 Javascript
实例讲解React 组件生命周期
Jul 08 Javascript
使用JQuery实现的分页插件分享
Nov 05 #Javascript
javascript实现tab切换的四种方法
Nov 05 #Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 #Javascript
JS使用正则表达式除去字符串中重复字符的方法
Nov 05 #Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 #Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 #Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 #Javascript
You might like
ajax+php打造进度条代码[readyState各状态说明]
2010/04/12 PHP
php把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
JavaScript 基础篇之运算符、语句(二)
2012/04/07 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
2013/06/16 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
JQuery Mobile实现导航栏和页脚
2016/03/09 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
JavaScript判断日期时间差的实例代码
2018/03/01 Javascript
基于vue hash模式微信分享#号的解决
2020/09/07 Javascript
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
Python中__init__和__new__的区别详解
2014/07/09 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
python+opencv实现动态物体追踪
2018/01/09 Python
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
利用python3筛选excel中特定的行(行值满足某个条件/行值属于某个集合)
2020/09/04 Python
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
喝酒检查书范文
2014/02/23 职场文书
探亲假请假条
2014/04/11 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
Python如何导出导入所有依赖包详解
2021/06/08 Python
德劲DE1105机评
2022/04/05 无线电
Vue Element plus使用方法梳理
2022/12/24 Vue.js