【web前端】js页面文字选中后分享到新浪微博实现 _【web前端】js页面文字选中后分享到新浪微博实现

文章插图
其实呢，本篇文章所在的页面本身就是个demo，你使用鼠标选中一段文字看看，哦呵呵，是不是有反应啊，不要犹豫，果断分享吧。//zxx:如果您发现并没有此效果，同时您没有禁用javascript，那么，您可能是在rss阅读器中或是在其他邪门歪道的网站上阅读本文，点击或浏览器地址栏中输入以下地址可以看到分享功能。
三、方法与代码
选中即分享的功能看上去比较高级，其实实现是相当简单的。其中的会让人头大，一般人也不感兴趣的原理这里就直接跳过。这个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如下：





文章插图

则直接：
$sinaMiniBlogShare(document.getElementById("imgSinaShare"));
就实现了选中文字分享到新浪微博的功能了。
这里的方法没有兼容性问题，IE之流，firefox或是chrome浏览器可以轻松分享；另外，方法原生的javascript代码，不依赖于任何库，所以，只要浏览器不禁用javascript，哪里都可以使用，真可谓方便快捷，无孔不入，网页开发，必备良药。
【【web前端】js页面文字选中后分享到新浪微博实现】四、结语及补充
其实呢，此方法不仅支持新浪微博，支持企鹅微博（腾讯微博），狐狸微博（搜狐微博），也是可以的，只要根据各个微博分享页面的API地址，将window.open()中的地址换换就可以了，我想，应该很简单的。您要是有兴致，可以把这些乱七八糟的分享都集合到一个方法中，做出插件性质的，各个网站任意分享，通过参数接口灵活控制，估计会流行的。不过我个人不太喜欢选中一段文字后面跟着个浮动的跟屁虫，尤其是大大的跟屁虫，看着眼烦，无兴趣，所以，我是不会去整一个分享集合的插件的。
时间仓促，技术有限，文中出现表述不准确的地方在所难免，欢迎指正。
原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[]