Question

我正在开发一个需要保持在页面顶部的Chrome扩展程序，因此我们选择了iframe实现。 iframe是通过content_script.js创建的，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。

popup.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;
}

无法更改iframe属性

1 个答案: