Javascript特效：获取选中内容分享至微博

原创

KaiSarH 2021-09-01 09:51:12 博主文章分类：JS ©著作权

文章标签 html php .net 微博分享 sed 文章分类 前端开发

©著作权归作者所有：来自51CTO博客作者KaiSarH的原创作品，请联系作者获取转载授权，否则将追究法律责任

知识点

标准浏览器
```
window.getSelection();
```
ie获得选择的文字
```
document.selection.createRange().text;
```

兼容性写法

var selectedText;
if(window.getSelection){ //标准模式
    selectedText = window.getSelection().toString();
}else{ // IE系列
    selectedText = document.selection.createRange().text;
}

微博分享

 window.location.href = 'http://v.t.sina.com.cn/share/share.php?' +                     'searchPic=false&title='+selectedText+'&url=https://blog.csdn.net/KaiSarH'

获取事件兼容性写法
```
var e = ev1 || window.event;
```

获取点击目标及其ID

var target = e.target ? e.target : e.srcElement;	
var targetID = e.target ? e.target.id : e.srcElement.id;

运行效果

Javascript特效：获取选中内容分享至微博_php
Javascript特效：获取选中内容分享至微博_sed_02

代码

<!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_wei_bo{
            width: 26px;
            height: 26px;
            background: url("images/share.gif");
            position: absolute;
            display: none;
        }

    </style>
</head>
<body>
    <p id="word">
        虎扑12月27日讯 独行侠今日坐镇主场迎来马刺的挑战，东契奇伤愈复出回归。首节开局独行侠凭借两记三分取得8-0的领先，这波攻势帮助独行侠在首节大部分时间里一直取得领先，不过末段的突然哑火拱手让出领先优势，马刺凭借一波9-0的小高潮反超比分，首节结束时马刺24-20领先独行侠。次节双方进攻端手感热得发烫打出高效对飙，不过独行侠最后时刻抓住机会送出10-2的小高潮，这10分都和东契奇有关，独行侠也借着这波攻势以54-47领先马刺结束上半场。

        休息归来，独行侠继续控制着局面，小哈达威和克勒贝尔的两记三分曾帮助球队取得10分领先。不过马刺及时找回状态，盖伊回敬两记三分将分差追至5分保留希望。然而末节独行侠的三分火力更加凶猛，他们不足半节时间飙进7记三分，一波三分雨直接将分差拉大至15分奠定胜局。末段马刺掀起反击，但追至4分之时，时间也已经走完。最终，独行侠102-98击败马刺拿下比赛。
    </p>
    <div id="share_wei_bo"></div>
    <script src="../MyTools/MyTools.js"></script>
    <script>
        var selectedText;
        window.addEventListener('load',function (ev) {
            // 1. 监听鼠标松开
            myTool.$('word').addEventListener('mouseup',function (ev) {
                var e = ev || window.event;
                // 1.1 获取选中文字
                // console.log(window.getSelection().toString());

                if(window.getSelection){ //标准模式
                    selectedText = window.getSelection().toString();
                }else{ // IE系列
                    selectedText = document.selection.createRange().text;
                }
                // console.log(myTool.getSelectedText);

                // 1.2 显示
                if (selectedText.length !== 0){
                    myTool.$('share_wei_bo').style.display = 'block';
                    // 1.3 处理位置
                    myTool.$('share_wei_bo').style.left = e.pageX + 'px';
                    myTool.$('share_wei_bo').style.top = e.pageY + 'px';
                }
            });
            // 2. 监听文档点击
            document.addEventListener('mousedown',function (ev1) {
               var e = ev1 || window.event;
                // 2.1 获取点击的目标
                var targetID = e.target ? e.target.id : e.srcElement.id;
                // 2.2 判断
                if (targetID !== 'share_wei_bo'){
                    myTool.$('share_wei_bo').style.display = 'none';
                }else{
                    window.location.href = 'http://v.t.sina.com.cn/share/share.php?' +
                        'searchPic=false&title='+selectedText+'&url=https://blog.csdn.net/KaiSarH'

                }
            });
        }, false);
    </script>
</body>
</html>