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 相关文章推荐
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
JavaScript 验证码的实例代码(附效果图)
Mar 22 Javascript
关于JavaScript中的关联数组分析
Apr 09 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
Jun 01 Javascript
利用Javascript实现BMI计算器
Aug 16 Javascript
AngularJS  $on、$emit和$broadcast的使用
Sep 05 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
vue 移动端注入骨架屏的配置方法
Jun 25 Javascript
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
使用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
php入门学习知识点四 PHP正则表达式基本应用
2011/07/14 PHP
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
PHP基于phpqrcode生成带LOGO图像的二维码实例
2015/07/10 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
jQuery 插件开发指南
2014/11/14 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
2016/09/17 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
详解react如何在组件中获取路由参数
2017/06/15 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
2018/01/25 Javascript
react MPA 多页配置详解
2019/10/18 Javascript
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
Python中无限元素列表的实现方法
2014/08/18 Python
运行django项目指定IP和端口的方法
2018/05/14 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
pyenv虚拟环境管理python多版本和软件库的方法
2019/12/26 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
会计专业大学生职业生涯规划范文
2014/01/11 职场文书
美容院经理岗位职责
2014/04/03 职场文书
融资租赁计划书
2014/04/29 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
好书伴我成长演讲稿
2014/05/14 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
2015学生会文艺部工作总结
2015/04/03 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书
仙境之桥观后感
2015/06/16 职场文书
MySQL 可扩展设计的基本原则
2021/05/14 MySQL