Chrome扩展程序 - 底层页面上iframe的重叠内容

我有一个Chrome扩展程序，它在页面右侧显示一个菜单，其中包含几个宽度各为47px的按钮。因此，iframe的宽度也设置为47像素。但是，当点击一个按钮时，我想显示一个下拉菜单（或者你可以说的'水滴'），当然它比47px宽。目前，此内容在iframe的边缘被切断。Chrome扩展程序 - 底层页面上iframe的重叠内容

我宁愿能够从iframe中控制所有这些，这样我就不必每当我想要更改某些内容时都更新扩展名。有没有办法在下面的网站上覆盖iframe中的内容？

编辑

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

功能加载的iframe：

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>

来源

2016-04-11 Vincent

可能的重复http://stackoverflow.com/questions/18456498/how-can-i-change-the-size-of-an-iframe-from-inside –

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

在这种情况下，为什么使用iframe，而不是直接添加元素到页面？ –

没有办法在iframe溢出其边界（see this post）。

因此，当您想要显示更多内容时，您可能需要增加iframe的大小，可能是通过扩展名传递消息。或者，当你改变某些东西时，不要使用iframe并牺牲不必为扩展名发布更新。

来源

2016-04-11 14:27:09

Chrome扩展程序 - 底层页面上iframe的重叠内容

回答

相关问题