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 相关文章推荐
window.location.href中url中数据量太大时的解决方法
Dec 23 Javascript
了解Javascript的模块化开发
Mar 02 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
JS弹出新窗口被拦截的解决方法
Aug 09 Javascript
vue.js绑定class和style样式(6)
Dec 09 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 Javascript
webpack vue项目开发环境局域网访问方法
Mar 20 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
vue element upload组件 file-list的动态绑定实现
Oct 11 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
vue中axios封装使用的完整教程
Mar 03 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中in_array函数用法探究
2014/11/25 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
PHP实现字符串的全排列详解
2019/04/24 PHP
jQuery的链式调用浅析
2010/12/03 Javascript
在ASP.NET中使用JavaScript脚本的方法
2013/11/12 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
浅谈angularjs module返回对象的坑(推荐)
2016/10/21 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
vue中tab选项卡的实现思路
2018/11/25 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
Vue 实现从小到大的横向滑动效果详解
2019/10/16 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
Python Django中间件,中间件函数,全局异常处理操作示例
2019/11/08 Python
python构造函数init实例方法解析
2020/01/19 Python
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
2021/02/18 Python
热能动力工程毕业生自荐信
2013/11/07 职场文书
智能电子应届生求职信
2013/11/10 职场文书
车间副主任岗位职责
2013/12/24 职场文书
有创意的广告词
2014/03/18 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
龙猫观后感
2015/06/09 职场文书
关于保护环境的建议书
2019/06/24 职场文书
使用Pytorch训练two-head网络的操作
2021/05/28 Python