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 相关文章推荐
JS request函数 用来获取url参数
May 17 Javascript
Javascript 面试题随笔
Mar 31 Javascript
yepnope.js 异步加载资源文件
Sep 08 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
js动态生成指定行数的表格
Jul 11 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 Javascript
vue 使用localstorage实现面包屑的操作
Nov 16 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基础教程 php内置函数实例教程
2012/08/21 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
php防止sql注入简单分析
2015/03/18 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
javascript原型模式用法实例详解
2015/06/04 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
Node使用Selenium进行前端自动化操作的代码实现
2019/10/10 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
Python实现的简单发送邮件脚本分享
2014/11/07 Python
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
利用Python实现kNN算法的代码
2019/08/16 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
python小程序基于Jupyter实现天气查询的方法
2020/03/27 Python
什么是python的必选参数
2020/06/21 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
白宫黑市官网:White House Black Market
2016/11/17 全球购物
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
应届大学生求职的自我评价
2013/11/17 职场文书
ktv收银员岗位职责
2013/12/16 职场文书
高等教育学自荐书范文
2014/02/10 职场文书
致跳远运动员加油稿
2014/02/11 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
人民调解协议书范本
2014/10/11 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
2019奶茶店创业计划书范本,值得你借鉴
2019/08/14 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL