V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
soooulp
V2EX  ›  问与答

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

  •  
  •   soooulp · 2020-12-08 20:51:10 +08:00 · 471 次点击
    这是一个创建于 574 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    原脚本地址

    浏览器搜索扩展工具

    
     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';
            }
        });
    
    
    目前尚无回复
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2854 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 13:21 · PVG 21:21 · LAX 06:21 · JFK 09:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.