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 相关文章推荐
jQuery .tmpl(), .template()学习资料小结
Jul 18 Javascript
JavaScript避免代码的重复执行经验技巧分享
Apr 17 Javascript
原生js的弹出层且其内的窗口居中
May 14 Javascript
在for循环中length值是否需要缓存
Jul 27 Javascript
SublimeText自带格式化代码功能之reindent
Dec 27 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
Jun 24 Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
VUE 实现element upload上传图片到阿里云
Aug 12 Javascript
JS实现鼠标移动拖尾
Dec 27 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中GET变量的使用
2006/10/09 PHP
php adodb连接mssql解决乱码问题
2009/06/12 PHP
PHP 处理图片的类实现代码
2009/10/23 PHP
php格式化日期实例分析
2014/11/12 PHP
phpStudy 2016 使用教程详解(支持PHP7)
2017/10/18 PHP
tp5修改(实现即点即改)
2019/10/18 PHP
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
jQuery的cookie插件实现保存用户登陆信息
2014/04/15 Javascript
Javascript基础教程之for循环
2015/01/18 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
浅谈vue3中effect与computed的亲密关系
2019/10/10 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
Python学习笔记(二)基础语法
2014/06/06 Python
Python制作简易注册登录系统
2016/12/15 Python
Python基础教程之内置函数locals()和globals()用法分析
2018/03/16 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
详解Python sys.argv使用方法
2019/05/10 Python
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
经济类毕业生求职信
2014/06/26 职场文书
计算机求职信
2014/07/02 职场文书
教师反腐倡廉演讲稿
2014/09/03 职场文书
普通党员自我剖析材料
2014/10/07 职场文书