Question

我有一个chrome扩展程序，它在页面右侧显示一个菜单，其中包含几个每个47px宽的按钮。因此，iframe的宽度也设置为47像素。

但是，当点击一个按钮时，我想显示一个下拉列表（或者你可以说是'dropleft'），当然这比47px更宽。目前，此内容在iframe的边缘被截断。

我希望能够从iframe控制所有这些，这样每当我想要更改某些内容时，我就不必更新扩展名。有没有办法在下面的网站上叠加来自iframe的内容？

修改

我不认为调整iframe的大小是解决方案。具有附加信息的div将例如是400x200像素。如果我只是增加iframe的大小，会有透明的部分显示底层网站，但不会被点击。理想情况下，iframe中的内容只会覆盖现有的iframe大小。

加载iframe的content.js中的函数：

function showMenu(element) {

    var iframe = document.createElement('iframe');

    iframe.src = chrome.runtime.getURL('menu.html);
    iframe.style.cssText = "\
                            position:absolute;\
                            visibility:visible;\
                            top:33%;\
                            right:0px;\
                            width:47px;\
                            height:198px;\
                            margin:0;\
                            padding:0;\
                            border:none;\
                            overflow:hidden;\
                            background:transparent;\
                            z-index:999999;\
                        ";

    element.append(iframe);       
}

menu.html

<style>
html, body, iframe, h2 {
    margin: 0;
    padding: 0;
    border:none;
    display: block;
    width: 100vw;
    height: 100vh;
    background: transparent;
    color: black;
}
h2 {
    height: 50px;
    font-size: 20px;
}
iframe {
    height: calc(100vh - 50px);
}
</style>

<iframe class="menu"></iframe>

Answer 1

iframe无法溢出其边界（see this post）。

因此，当您想要显示更多内容时，或者通过使用扩展程序传递消息时，您需要增加iframe的大小。或者不使用iframe并牺牲在更改内容时不必为扩展发布更新。

Chrome扩展程序 - 在基础页

1 个答案: