动态调整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扩展弹出窗口高度

回答

相关问题