動態調整Chrome擴展彈出窗口高度

我正在構建一個Chrome擴展，它在單擊擴展圖標時在彈出窗口中顯示動態更新的HTML。我注意到，彈出式窗口的大小有時（大約每6次點擊一次）太小而不能顯示正在顯示的文本。通常，它的高度非常低（導致需要很多垂直滾動來查看彈出窗口的內容），但有時（一次大約15次點擊），彈出窗口的寬度也會受到影響。動態調整Chrome擴展彈出窗口高度

故障處理步驟我已經採取沒有改善

聲明<!DOCTYPE html>
在CSS

體{ 寬度：700像素，最小高度：400像素 }指定

\\包含內容的div的ID
#htmlcontent { 寬度：700像素，最小高度：400像素 }

3.使用的JavaScript來修改體高度和寬度onload事件後

window.onload = function(){ 
    var content = document.getElementById('htmlcontent'); 
    var height = content.scrollHeight + 20; 
    document.body.style.minHeight = height + 'px'; 
    document.body.style.minWidth = "700px"; 
    window.scroll(0,0); 
}

使用iFrame不是一種實用的解決方案，因爲顯示的內容是本地機器

有在HTML樹沒有隱藏要素

代碼片段

popup.html

<!DOCTYPE html> 
<html> 
    <head> 
    <title></title> 
    <script type="text/javascript" src="underscore.js"></script> 
    <script type="text/javascript" src="popup.js"></script> 
    <link rel="stylesheet" href="popup.css"> 
    </head> 
    <body> 
    <div class="container"> 
     <div class="banner"> 
     <img src="/icons/iconx19.png" width="19" height="19"> 
     <p>Title Text</p> 
     </div> 
     <div id="canvas"> 
     <!--content goes here --> 
     </div> 
    </div> 
    </body> 
</html>

popup.js

var popupText = '<div class="main_record">blah, blah, blah</div>'; // dynamically generated html 
document.getElementById('canvas').innerHTML = popupText; 


// ensures the popup window is the proper width and height 
window.onload = function(){ 
    var popupWidth = 700; // default width of popup in px 
    var animationDelay = 250; // wait time for popup animation to complete 
    setTimeout(function(){ 
    var popupHTML = document.getElementById('canvas'); 
    var rawHeight = parseInt(popupHTML.offsetHeight) + 20; 

    document.body.style.minWidth = popupWidth + 'px'; 
    document.body.style.minHeight = rawHeight + 'px'; 
    window.scroll(0,0); 
    }, animationDelay); 
};

popup.css

.container { 
    overflow-x: auto; 
    background-color: rgb(246, 246, 239); 
} 

.banner { 
    background-color: rgb(255, 102, 0); 
    width: 700px; 
    overflow: auto; 
    height: 24px; 
} 

.banner img{ 
    float: left; 
    margin-left: 5px; 
    margin-top: 3px; 
} 

.banner p{ 
    color: #000000; 
    font-weight: bold; 
    font-family: Verdana, Geneva, sans-serif; 
    font-size: 10pt; 
    float: left; 
    margin-left: 10px; 
    margin-bottom: 10px; 
    position: absolute; 
    top:0px; 
    left: 30px; 
} 

#canvas { 
    overflow-x: auto; 
    width: 700px; 
} 

.main_record { 
    margin-left: 5px; 
} 

.main_record .title { 
    font-family: Verdana, Geneva, sans-serif; 
    font-size: 10pt; 
    color: #000000; 
    margin-bottom: 2px; 
} 

.main_record .subtitle { 
    font-family: Verdana, Geneva, sans-serif; 
    font-size: 7pt; 
    color: #828282; 
    margin-top: 4px; 
} 

.main_record a{ 
    color: #828282; 
} 

.main_record a:focus{ 
    outline-style: none; 
}

來源

2015-01-09 takinola

你可以發佈你的代碼或鏈接到你的網站？ – 2015-01-09 21:31:26

您是否檢查HTML樹中是否存在隱藏元素？如果HTML樹中存在隱藏元素，則Chrome擴展程序的彈出窗口不會調整大小。也就是說，基本上隱藏的整個頁面將阻止調整彈出框的大小。解決方案是：document.getElementById（「hiddenDiv」）。innerHTML =「」; – gui47 2015-01-10 00:57:35

HTML中絕對沒有隱藏的元素。 – takinola 2015-01-10 02:01:54

這可能太晚，解決了OP的問題，但對於其他人的利益：

的問題似乎是，Chrome的動畫彈出窗口的大小根據<body>標籤中的內容高度計算。在此計算/渲染週期中，DOM操作將由瀏覽器執行，從而導致彈出窗口錯誤。

我的解決方案是遠遠不夠理想，但應該簡單的使用情況下工作：

setTimeout(function(){ 
    // DOM manipulation stuff 
}, 0);

我相信這個工程，因爲它推動DOM操作的執行到一個新的事件循環，可能是因爲Chrome是用於偵聽DOM更改並重新計算/呈現插件。

來源

2016-02-21 22:59:17 Nijk

動態調整Chrome擴展彈出窗口高度

回答

相關問題