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的重疊內容

回答

相關問題