是否在可拖动的iframe中打开Chrome扩展程序弹出窗口？

Question

我希望我的扩展程序以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)
}
}

Answer 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，该div可拖动，然后在顶部粘贴另一层html。修改后的位置允许从顶部抓取div，然后四处移动。