javascript - 无法更改 iframe 属性

Question

我正在开发一个需要保留在页面顶部的 chrome 扩展程序，因此我们选择了 iframe 实现。通过content_script.js创建iframe，UI添加HTML和JS，一切就绪。 UI 设置之一是能够更改 UI (iframe) 的位置。当在 content_script.js 中创建 iframe 时，我通过直接更改属性测试了执行此操作的代码，并取得了成功。

但是，当我想实时分配这些属性时，我似乎无法将 iframe 放在变量中，因为 JS 代码找不到我分配给它的 ID。

content_script.js:

var iframe = document.createElement('iframe');
iframe.style.position = "fixed";
iframe.style.height = "800px";
iframe.style.top = "0px";
iframe.style.right = "0px";
iframe.style.zIndex = "9000000000000000000";
iframe.frameBorder = "1"; //temporary, so we can see the bounds while developing.
iframe.overflow = "hidden";
iframe.id = "main-UI";
iframe.src = chrome.extension.getURL("popup.html");

document.body.appendChild(iframe);

popup.js中的相关JS代码:

var mainUI = document.getElementById('main-UI');

function changeUIPosition(position) {

    if (position === positions.topLeft.name)
    {
        mainUI.style.top = '0px';
        mainUI.style.left = '0px';
    }
    else if (position === positions.bottomLeft.name)
    {
        mainUI.style.bottom = '0px';
        mainUI.style.left = '0px';
    }
    else if (position === positions.bottomRight.name)
    {
        mainUI.style.bottom = '0px';
        mainUI.style.right = '0px';
    }
    else if (position === positions.topRight.name)
    {
        mainUI.style.top = '0px';
        mainUI.style.right = '0px';
    }
}

错误:Uncaught TypeError: Cannot read property 'style' of null

iframe 的控制台截图:

我已经通过 ID 从 DOM 中提取了无数元素...我不明白，是因为它是由 content_script 创建的吗？我对(vanilla)Javascript 还很陌生，这个项目的个人目标之一是不使用单一框架，这样我就可以提高我的 Javascript 技能。

编辑 1:按名称获取元素会产生稍微不同的错误:

Cannot set property 'bottom' of undefined

Answer 1

无法通过 iframe 内的脚本直接操作 iframe。

我设法通过从 popup.js 向 content_script.js 发送消息来解决这个问题。到达那里后，可以轻松更改属性，以便可以根据用户的意愿定位 UI。

弹出.js:

function changeUIPosition(position) {
    chrome.tabs.getCurrent(
        function(tab){
            chrome.tabs.sendMessage(tab.id, position);
        });
}

content_script.js:

chrome.runtime.onMessage.addListener(function(msg, sender){
    if(msg === "toggle") toggle();
    else (position(msg))
});

function position(msg) {

//remove current alignment styles, if you leave them, they will start to act up.
iframe.style.removeProperty('right');
iframe.style.removeProperty('bottom');
iframe.style.removeProperty('top');
iframe.style.removeProperty('left');

switch(msg) {
    case positions.topLeft.name:
        iframe.style.top = '0px';
        iframe.style.left = '0px';
        break;
    case positions.bottomLeft.name:
        iframe.style.bottom = '0px';
        iframe.style.left = '0px';
        break;
    case positions.bottomRight.name:
        iframe.style.bottom = '0px';
        iframe.style.right = '0px';
        break;
    case positions.topRight.name:
        iframe.style.top = '0px';
        iframe.style.right = '0px';
        break;
    default:
        break;
}