JavaScript 选中内容分享到微博、QQ空间

最新推荐文章于 2020-09-11 11:19:08 发布

御剑把酒听秋雨丶

最新推荐文章于 2020-09-11 11:19:08 发布

阅读量294

点赞数

分类专栏： JavaScript 文章标签： JavaScript HTML CSS

本文链接：https://blog.csdn.net/Fweiren/article/details/88796910

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

效果展示

选中内容弹出分享菜单

点击新浪图标分享到微博

点击QQ空间图标分享到QQ空间

资源下载

选中内容分享到微博、QQ空间

index.html 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选中内容分享</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        p {
            margin: 100px;
            width: 300px;
        }

        #share {
            width: 110px;
            height: 50px;
            position: absolute;
            display: none;
        }

        #share a {
            float: left;
            margin-left: 5px;
        }

        #share-sinaminiblog, #share-qzone {
            width: 50px;
            height: 50px;
            border-radius: 8px;
            cursor: pointer;
        }
        #share-sinaminiblog {
            background: url(images/sina.png) no-repeat;
            background-size: 100% 100%;
        }

        #share-qzone {
            background: url(images/qzone.png) no-repeat;
            background-size: 100% 100%;
        }
    </style>
</head>
<body>
    <p id="word">【销往全国！益家逸、安康、好相传等品牌被点名，原料竟是洋垃圾...触目惊心！】
        22日早6点，海关总署组织12个直属海关开展打击“洋垃圾”走私“蓝天2019”第一轮集中行动，
        截至昨天20:30，此次行动共打掉涉嫌走私犯罪团伙22个，抓获犯罪嫌疑人115名，查证废塑
        料、废矿渣等各类破坏生态环境的涉案货物33.81万吨。其中，申报为“成人纸尿裤”的涉案货
        物重达11.4吨，缉私人员在办案中发现这些货物包装凌乱，没有独立包装，没有生产日期、保
        质期，甚至有一些带有的污渍和霉斑。明显不符合我国《一次性使用卫生用品卫生标准》。据
        了解，这些纸尿裤是境外一次性卫生用品生产企业在生产中产生的废物。主要来源是机头料和
        扫地料，即机器刚启动或者料件切换过程中产生的废品次品。</p>
    <div id="share">
        <a title="分享到新浪微博" id="share-sinaminiblog"></a>
        <a title="分享到QQ空间" id="share-qzone"></a>
    </div>
<script src="js/myFunc.js"></script>
<script>
    window.onload = function () {
        var selectedText;

        // 1.监听鼠标抬起
        $("word").onmouseup = function (event) {
            // 1.3 事件
            var e = event || window.event;

            // 1.1 获取选中的文字
            if(window.getSelection){ // 标准浏览器
                selectedText = window.getSelection().toString();
            }else { // IE 系列
                selectedText = document.selection.createRange().text;
            }

            if(selectedText !== ""){
                // 1.2 显示分享面板
                //$("share").innerText = selectedText;
                $("share").style.display = "block";

                // 1.3 改变位置
                $("share").style.left = e.clientX + "px";
                $("share").style.top = e.clientY + "px";
            }


        };

        // 2.监听文档的点击
        document.onmousedown = function (event) {
            var e = event || window.event;

            // 2.1 获取点击区域的ID
            var targetId = e.target ? e.target.id : e.srcElement.id;

            // 2.2 判断
            if(targetId === "share-sinaminiblog") { // 微博分享
                window.location.href = "http://v.t.sina.com.cn/share/share.php?searchPic=false&title="
                + selectedText + "&url=https://github.com/fangweiren";
            }else if(targetId === "share-qzone") { // QQ 空间分享
                window.location.href = "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary="
                + selectedText + "&url=https://github.com/fangweiren";
            }else if(targetId !== "share"){
                $("share").style.display = "none";
            }

            // 2.3 防止拖动时选中内容
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        }
    }
</script>
</body>
</html>

参数说明

新浪微博

http://service.weibo.com/share/share.php?

count=表示是否显示当前页面被分享数量(1显示)(可选，允许为空)
&url=将页面地址转成短域名，并显示在内容文字后面。(可选，允许为空)
&appkey=用于发布微博的来源显示，为空则分享的内容来源会显示来自互联网。(可选，允许为空)
&title=分享时所示的文字内容，为空则自动抓取分享页面的title值(可选，允许为空)
&pic=自定义图片地址，作为微博配图(可选，允许为空)
&ralateUid=转发时会@相关的微博账号(可选，允许为空)
&language=语言设置(zh_cn|zh_tw)(可选)

QQ空间

http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?

url=分享的网址
&desc=默认分享理由(可选)
&summary=分享摘要(可选)
&title=分享标题(可选)
&site=分享来源如：腾讯网(可选)
&pics=分享图片的路径(可选)

target 事件属性

target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。
语法：event.target
获取 id：event.target.id
获取 text：event.target.textContent
获取 class：event.target.className
获取 value：event.target.value

兼容写法：var targetId = event.target ? event.target.id : event.srcElement.id;

参考

分享到QQ空间和新浪微博
 如何获取当前id与class

御剑把酒听秋雨丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 选中内容分享到微博、QQ空间

效果展示选中内容弹出分享菜单点击新浪图标分享到微博点击QQ空间图标分享到QQ空间资源下载选中内容分享到微博、QQ空间index.html 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选中内容分享</...
复制链接

扫一扫