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 相关文章推荐
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
Mar 31 Javascript
Node调试工具JSHint的安装及配置教程
May 27 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
在Javascript中处理字符串之big()方法的使用
Jun 08 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 Javascript
js实现日历与定时器
Feb 22 Javascript
Vue实现动态响应数据变化
Apr 28 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
WebSocket的通信过程与实现方法详解
Apr 29 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
Vue3.0数据响应式原理详解
Oct 09 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
十天学会php之第八天
2006/10/09 PHP
php intval的测试代码发现问题
2008/07/27 PHP
php调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
laravel 解决paginate查询多个字段报错的问题
2019/10/22 PHP
js 对象是否存在判断
2009/07/15 Javascript
javascript 必知必会之closure
2009/09/21 Javascript
Javascript遍历table中的元素示例代码
2014/07/08 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
jquery中键盘事件小结
2016/02/24 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
2016/12/03 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
vue2组件之select2调用的示例代码
2017/10/12 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
小程序视频列表中视频的播放与停止的示例代码
2018/07/20 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
2021/01/07 Javascript
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
Python遍历字典方式就实例详解
2019/12/28 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
python烟花效果的代码实例
2020/02/25 Python
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
科研课题实施方案
2014/03/18 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
学校党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
跳高加油稿
2015/07/21 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书
nginx实现发布静态资源的方法
2021/03/31 Servers
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
2021/08/07 HTML / CSS