菜鸡求教,如何将三个对象放在一个容器

2020-12-08 20:51:10 +08:00
 soooulp

三个不同对象,显示的不同的图标,划词不同内容分别弹出图标,如何合并到一个容器里面呢

原脚本地址

浏览器搜索扩展工具


 var iconArraya = [
    {
            name: '百度',
            image: 'https://i.ibb.co/R9HMTyR/1-5.png',
            popup: function (text) {
                open('https://search.bilibili.com/live?keyword=' + encodeURIComponent(text));
            }
        },
    ],
    iconArrayb = [
        {
            name: '打开',
            image: 'https://i.ibb.co/fxpm6Wc/image.png',host: [''],
            popup: function (text) {
                if(text.indexOf("http://")==0||text.indexOf("https://")==0)
                window.open(text, "_blank");
                else window.open("http://"+text, "_blank");
            }
        },
    ],
    iconArrayc = [
        {
            name: '复制',
            image: 'https://i.ibb.co/R0bq3jm/icons8-delete-512-1.png',
            host: [''],
            popup: function (text) {
                text = document.defaultView.getSelection().toString();
    document.execCommand('copy', false, null)
            }

        },
    ],
    hostCustomMap = {};
    iconArraya.forEach(function (obj) {
        obj.host.forEach(function (host) {
            hostCustomMap[host] = obj.custom;
        });
    });
    iconArrayb.forEach(function (obj) {
        obj.host.forEach(function (host) {
            hostCustomMap[host] = obj.custom;
        });
    });
    iconArrayc.forEach(function (obj) {
        obj.host.forEach(function (host) {
            hostCustomMap[host] = obj.custom;
        });
    });
    var text = GM_getValue('search');
    if (text && window.location.host in hostCustomMap) {
        keyword.beforeCustom(hostCustomMap[window.location.host]);
    }
    var icona = document.createElement('div');
    var iconb = document.createElement('div');
    var iconc = document.createElement('div');

    iconArraya.forEach(function (obj) {
        var img = document.createElement('img');
        img.setAttribute('src', obj.image);
        img.setAttribute('alt', obj.name);
        img.setAttribute('title', obj.name);
        img.addEventListener('mouseup', function () {
                keyword.beforePopup(obj.popup);
        });
        img.setAttribute('style', '' +
            'cursor:pointer!important;' +
            'display:inline-block!important;' +
            'width:22px!important;' +
            'height:22px!important;' +
            'border:0!important;' +
            'background-color:rgba(255,255,255,1)!important;' +
            'padding:0!important;' +
            'margin:0!important;' +
            'margin-right:5px!important;' +
            '');
        icona.appendChild(img);
    });
    iconArrayb.forEach(function (obj) {
        var img = document.createElement('img');
        img.setAttribute('src', obj.image);
        img.setAttribute('alt', obj.name);
        img.setAttribute('title', obj.name);
        img.addEventListener('mouseup', function () {
                keyword.beforePopup(obj.popup);
        });
        img.setAttribute('style', '' +
            'cursor:pointer!important;' +
            'display:inline-block!important;' +
            'width:22px!important;' +
            'height:22px!important;' +
            'border:0!important;' +
            'background-color:rgba(255,255,255,1)!important;' +
            'padding:0!important;' +
            'margin:0!important;' +
            'margin-right:5px!important;' +
            '');
        iconb.appendChild(img);
    });
        iconArrayc.forEach(function (obj) {
        var img = document.createElement('img');
        img.setAttribute('src', obj.image);
        img.setAttribute('alt', obj.name);
        img.setAttribute('title', obj.name);
        img.addEventListener('mouseup', function () {
                keyword.beforePopup(obj.popup);
        });
        img.setAttribute('style', '' +
            'cursor:pointer!important;' +
            'display:inline-block!important;' +
            'width:22px!important;' +
            'height:22px!important;' +
            'border:0!important;' +
            'background-color:rgba(255,255,255,1)!important;' +
            'padding:0!important;' +
            'margin:0!important;' +
            'margin-right:5px!important;' +
            '');
        iconc.appendChild(img);
    });
    icona.setAttribute('style', '' +
        'display:none!important;' +
        'position:absolute!important;' +
        'padding:0!important;' +
        'margin:0!important;' +
        'font-size:13px!important;' +
        'text-align:left!important;' +
        'border:0!important;' +
        'background:transparent!important;' +
        'z-index:2147483647!important;' +
        '');
    iconb.setAttribute('style', '' +
        'display:none!important;' +
        'position:absolute!important;' +
        'padding:0!important;' +
        'margin:0!important;' +
        'font-size:13px!important;' +
        'text-align:left!important;' +
        'border:0!important;' +
        'background:transparent!important;' +
        'z-index:2147483647!important;' +
        '');
    iconc.setAttribute('style', '' +
        'display:none!important;' +
        'position:absolute!important;' +
        'padding:0!important;' +
        'margin:0!important;' +
        'font-size:13px!important;' +
        'text-align:left!important;' +
        'border:0!important;' +
        'background:transparent!important;' +
        'z-index:2147483647!important;' +
        '');
    // 添加到 DOM
    document.documentElement.appendChild(icona);
    document.documentElement.appendChild(iconb);
    document.documentElement.appendChild(iconc);
    // 鼠标事件
    document.addEventListener('mousedown', function (e) {
        if (e.target == icona || (e.target.parentNode && e.target.parentNode == icona)||
            e.target == iconb || (e.target.parentNode && e.target.parentNode == iconb)||
            e.target == iconc || (e.target.parentNode && e.target.parentNode == iconc)) {
            e.preventDefault();
        }
    });

    // 选中变化事件:
    document.addEventListener("selectionchange", function () {
        if (!window.getSelection().toString().trim()) {
            icona.style.display = 'none';
            iconb.style.display = 'none';
            iconc.style.display = 'none';
        }
    });

    // 鼠标事件
    document.addEventListener('mouseup', function (e) {
        if (e.target == icona || (e.target.parentNode && e.target.parentNode == icona)||
            e.target == iconb || (e.target.parentNode && e.target.parentNode == iconb)||
            e.target == iconc || (e.target.parentNode && e.target.parentNode == iconc)
           ) {
            e.preventDefault();
            return;
        }
        var text = window.getSelection().toString().trim();
        var url = text.match(/( https?:\/\/(\w[\w-]*\.)+[A-Za-z]{2,4}(?!\w)(:\d+)?(\/([\x21-\x7e]*[\w\/=])?)?|(\w[\w-]*\.)+(com|cn|org|net|info|tv|cc|gov|edu)(?!\w)(:\d+)?(\/([\x21-\x7e]*[\w\/=])?)?)/i);
        if (url && iconb.style.display == 'none') {
            iconb.style.top = e.pageY +40 + 'px';
            if(e.pageX -70<10)
                iconb.style.left='10px';
            else
                iconb.style.left = e.pageX -70 + 'px';
            iconb.style.display = 'block';
        } else if (text.length >= 30) {
            iconc.style.top = e.pageY +40 + 'px';
           if(e.pageX -70<10)
               iconc.style.left='10px';
           else
               iconc.style.left = e.pageX -70 + 'px';
           iconc.style.display = 'block';
        } else if (!text) {
            icona.style.display = 'none';
            iconb.style.display = 'none';
        } else if(text && icona.style.display == 'none'){
           icona.style.top = e.pageY +40 + 'px';
           if(e.pageX -70<10)
               icona.style.left='10px';
           else
               icona.style.left = e.pageX -70 + 'px';
           icona.style.display = 'block';
        }
    });

907 次点击
所在节点    问与答
0 条回复

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/733484

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX