使 iframe 中的 chrome 扩展弹出窗口可拖动？答案

【问题标题】：Make chrome extension popup opening in iframe draggable?使 iframe 中的 chrome 扩展弹出窗口可拖动？
【发布时间】：2020-02-18 11:04:54
【问题描述】：

我希望我的扩展程序以 iframe 的形式打开，而不是普通的弹出窗口。到目前为止，我已经能够做到这一点。现在我正在尝试使用 jQuery UI 使这个 iframe 可拖动，但无法这样做。我的inject.js 代码如下：

function toggleVisisbility (node) {
node.style.display = (node.style.display === 'none' || node.style.display === '') ? 'block' : 'none'
}

function appendIframe(app) {
var iframe = document.createElement('iframe');
iframe.id = 'popup-app';
iframe.style.cssText = 'position:absolute;top:0;right:0;display:block;' +
    'width:350px;height:500px;z-index:99999999;' +
    'border: none;' +
    'box-shadow: 0px 8px 16px rgba(0,0,0,0.25);';

chrome.storage.local.get("logged_in", function(data) {
    if(data.logged_in) {
        iframe.src = chrome.runtime.getURL('./html/loggedPopup.html')
    } else {
        iframe.src = chrome.runtime.getURL('./html/popup.html')
    }
});

app.appendChild(iframe)
}

function insertIframe(anchor) {
let app = Array.from(anchor.childNodes).find(function(node){ return node.id === 'popup-app'})

if (app) {
    if (app.querySelectorAll('iframe').length === 0) {
        appendIframe(app)
    }
    toggleVisisbility(app)
} else {
    appendIframe(anchor)
}
}

var extensionOrigin = 'chrome-extension://' + chrome.runtime.id
if (!location.ancestorOrigins.contains(extensionOrigin)) {
var anchor = document.getElementById('cfp-anchor')
if (anchor) {
    insertIframe(anchor)
} else {
    const AppRoot = document.createElement('div', { id: 'cfp-anchor' });
    AppRoot.id = 'cfp-anchor';
    const body = document.getElementsByTagName('body')[0];
    body.appendChild(AppRoot);
    AppRoot.innerHTML = '';
    insertIframe(AppRoot)
}
}

【问题讨论】：

您的代码无法使其可拖动，请查找examples。
我使用的是 $("#cfp-anchor").draggable();但它不起作用，这就是我从代码中删除它的原因。
它可能也需要添加 CSS。这里的问题是，简单地将 CSS 添加到页面中会与页面本身发生冲突，因此您必须使用 ShadowDOM 或通过 DOM 侦听器手动实现拖动。

标签： google-chrome-extension draggable

【解决方案1】：

我想出了解决办法。我使用 div 而不是 iframe，使 div 可拖动，然后将我的 html 加载到 div 中。我使用了以下代码：

function appendIframe(app) {

var draggableDiv = document.createElement('div');

draggableDiv.id = 'popup-app';
draggableDiv.className = 'draggable';
draggableDiv.setAttribute('data-draggable', 'true');
draggableDiv.style.cssText = 'position:fixed;top:16px;right:21px;display:block;' +
    'width:350px;height:500px;z-index:99999999;' +
    'border: none; cursor: move;' +
    'box-shadow: 0px 8px 16px rgba(0,0,0,0.25);' +
    'background: #25BAF1;';

chrome.storage.local.get("logged_in", function(data) {
    if(data.logged_in) {
        document.getElementById("popup-app").innerHTML='<object id="overlay" style="width: 100%; height: 100%; position: absolute; top: 25px" type="text/html" data='+chrome.runtime.getURL('./html/loggedPopup.html')+' ></object>';
    } else {
        document.getElementById("popup-app").innerHTML='<object id="overlay" style="width: 100%; height: 100%; position: absolute; top: 25px" type="text/html" data='+chrome.runtime.getURL('./html/popup.html')+' ></object>';
    }
});
$("#popup-app").addClass(".draggable");
makeDivDraggable();

app.appendChild(draggableDiv)
}


function makeDivDraggable(){
$(document).ready(function() {

    var $body = $('body');
    var $target = null;
    var isDraggEnabled = false;

    $body.on("mousedown", "div", function(e) {

        $this = $(this);
        isDraggEnabled = $this.data("draggable");

        if (isDraggEnabled) {
            if(e.offsetX===undefined){
                x = e.pageX-$(this).offset().left;
                y = e.pageY-$(this).offset().top;
            }else{
                x = e.offsetX;
                y = e.offsetY;
            }

            $this.addClass('draggable');
            $body.addClass('noselect');
            $target = $(e.target);
        }

    });

    $body.on("mouseup", function(e) {
        $target = null;
        $body.find(".draggable").removeClass('draggable');
        $body.removeClass('noselect');
    });

    $body.on("mousemove", function(e) {
        if ($target) {
            $target.offset({
                top: e.pageY  - y,
                left: e.pageX - x
            });
        }
    });

});
}

这基本上是创建一个 div，它是可拖动的，然后在顶部粘贴另一层 html。修改后的位置允许从顶部抓取 div，然后移动它。

【讨论】：