js页面文字选中后分享到新浪微博实现

一、功能简述

正是微博如火如荼的时节,其中各个微博的分享功能是网站推广产品的好东东啊,此时如何方便快捷的使用微博的分享功能就显得比较重要了。我的站点每篇文章的底部有一些分享的链接:
文章底部的一些分享功能 张鑫旭-鑫空间-鑫生活

不过我觉得这些分享基本上就是聋子的耳朵——摆设。除非这篇文章惊天地、泣鬼神,痛彻心扉,穿越前世今生。但是,如果有更加方便快捷的分享方式,这种冷淡得让人结冰的场面或许就不会经常出现。

一般翻译软件都有划词翻译功能,例如有道桌面词典的桌面划词翻译功能:
有道桌面词典划词翻译设置截图 张鑫旭-鑫空间-鑫生活

启用后,随便选中那个软件的一段文字,就会出现类似这样子的浮动提示框:
划词翻译功能示例截图 张鑫旭-鑫空间-鑫生活

在web页面上,我们也是可以实现类似的效果的:划词→显示提示→分享。这就是本文要展示的内容。

二、效果与demo

demo
您可以狠狠地点击这里:js文字选中分享到新浪微博demo

demo页面的文字是我点兵点将随机找的篇博客内容,纯粹示例。随便选择一段文字,结果就会出现个新浪的怪眼睛logo,如下图:
demo页面文字选择后 张鑫旭-鑫空间-鑫生活

然后,点击那个晃啊晃的猥琐的眼睛,就实现了选中文字分享到新浪微博的功能啦——会打开个新页面——如下效果:
分享到新浪微博功能实现之截图 张鑫旭-鑫空间-鑫生活

是不是分享起来很简单很方便啊!

其实呢,本篇文章所在的页面本身就是个demo,你使用鼠标选中一段文字看看,哦呵呵,是不是有反应啊,不要犹豫,果断分享吧。//zxx:如果您发现并没有此效果,同时您没有禁用javascript,那么,您可能是在rss阅读器中或是在其他邪门歪道的网站上阅读本文,点击或浏览器地址栏中输入以下地址http://www.zhangxinxu.com/wordpress/?p=1428可以看到分享功能。

三、方法与代码

选中即分享的功能看上去比较高级,其实实现是相当简单的。其中的会让人头大,一般人也不感兴趣的原理这里就直接跳过。这个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()中的地址换换就可以了,我想,应该很简单的。您要是有兴致,可以把这些乱七八糟的分享都集合到一个方法中,做出插件性质的,各个网站任意分享,通过参数接口灵活控制,估计会流行的。不过我个人不太喜欢选中一段文字后面跟着个浮动的跟屁虫,尤其是大大的跟屁虫,看着眼烦,无兴趣,所以,我是不会去整一个分享集合的插件的。

时间仓促,技术有限,文中出现表述不准确的地方在所难免,欢迎指正。

原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=1428

(本篇完)

分享到:

标签: , , , , , , ,

赞助商推荐(我也要赞助)

想学到点真东西? ×
如果你有1~3年前端开发经验,不妨 ×
想找个师兄入门前端?不妨 ×


发表评论(目前29 条评论)

  1. xiaoyxh说道:

    我想问一下,能否得到选中文字及他的标签格式,如加粗回车之类的,谢谢!

  2. 猎人说道:

    博主好文章,收藏了,以后得常来逛逛
    另外,我也遇到选中后图标离选中文字有点远的问题,敢问何解?

  3. 专设说道:

    划词分享技术在bshare/加网都已经有提供了啊,只需要生成代码就可以了,那个简单的多。谢谢分享!

  4. jjjoke.net说道:

    博主你好,我把淘宝搜索框加入一个div,现在已经能够实现划词之后显示该div。但有个问题,只要准备点击搜索框输入内容,这个div马上就消失了。求不消失的办法,应该怎么修改代码呢? 谢谢!

  5. jjjoke.net说道:

    请问一下,我想把弹出的新浪微博图标改为淘宝搜索框,能实现吗? 需要怎么写代码呢? 谢谢!

  6. 为什么我弄的 不显示呢

  7. seo博客说道:

    阁下个这段代码好像不能用,我回复个给你吧!我模仿的MSN的

    ——————————–JS BEGIN——————————————–
    var eleImgShare = document.getElementById(“jiaShare”); //图标
    var $miniBlogShare = 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;}
    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 – 400 < 0) ? e.clientX + 5 : e.clientX – 10, top = (e.clientY – 400 < 0) ? e.clientY + sh + 5 : e.clientY + sh – 10;
    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 : "";}
    }(eleImgShare);
    ————————————-JS END——————————————–

  8. yapals说道:

    不错,经常来看,学习了很多东西,加油吧,继续为我们这些菜鸟提供更多更好的页面效果。

  9. tujunlan说道:

    感谢楼主的分享,但是这段代码在IE6下无法使用,猜测是IE的onmouseup和onclick执行顺序问题,建议将代码中添加一个隐藏域保存选中文本,这样也不影响IE中的使用了

  10. xiangzhuyuan说道:

    学习了!初来乍到,收藏以后常来学习!

  11. 名字叫禅说道:

    我将代码粘了 初步实现了选中文字显示图片的功能 但是关于图片定位还是有点问题 而且用了第二个参数 eleContainer 但是那个眼睛和文字有时候不在一起 分的挺远的 是怎么回事啊

  12. 懵中人说道:

    个人还是倾向于把这个集成到IE的鼠标右键里,倒是一个不错的选择,省得老是跳出来,因为有时候是打算划词搜索的,容易发生冲突。谢谢楼主,正打算开发一款这样的IE插件呢,有机会交流一下~

  13. 让让在线说道:

    话说咱对js一点不懂,怎么引用这段代码,实现上面的功能呢?

  14. weii说道:

    老大,问问为什么我按照你说的添加了以后那个分享图标一直是出现的,而没有隐藏掉

  15. 定格说道:

    版主,用了你这个,整个页面都有那个效果了,我想规定在某个区域(比如某个DIV内)有这个效果,其他同一页面的其他地方没有此效果,求助。。

  16. 寒霜说道:

    火狐下Deprecated method document.getSelection() called. Please use window.getSelection() instead.推荐用windwo.getSelection()

  17. 包子说道:

    window.open方法加入以下代码
    “height=610,width=610,resizable=no,menubar=no,toolbar=no,window.screenLeft=330 window.screenTop=75″ 怎么样?

  18. 时光可见说道:

    这篇文章很不错吖,那个JS已经被我扒过去用了,特别感谢!!

  19. CHEUNG说道:

    添加到主题里面的哪个文件?

  20. bingpanda说道:

    可惜在iPad上用不了,有没有可能改进?

  21. 正在寻找,感谢分享

  22. 说道:

    方法测试了,不好用啊,楼主能不能发个详细的文档给我邮箱 xfe@163.com 谢了

  23. 雨忆说道:

    虽然我很讨厌sina的这个功能 不过这篇文章不错耶

  24. hou_ve说道:

    不错,学习了!

  25. wordgold说道:

    有个bug,chrome下选完文字如果再在选中文字上点击下的话就会出现,建议加个判断

  26. mopvhs说道:

    用在某些页面上还可以当作复制按钮,代替Ctrl+C~~~