我正在开发一个Chrome扩展程序，当单击扩展程序图标时，在弹出窗口中显示动态更新的HTML内容。我发现弹出窗口的大小有时（大约每6次单击一次）太小而无法显示文本。通常，高度非常缩小（需要大量垂直滚动才能查看弹出窗口内容），但有时（大约15次单击一次），弹出窗口的宽度也受到影响。
以下是我已经采取的故障排除步骤，但并没有改善：
1.声明了 2.在CSS中指定： body { width：700px， min-height：400px } \\包含内容
以下是我已经采取的故障排除步骤，但并没有改善：
1.声明了 2.在CSS中指定： body { width：700px， min-height：400px } \\包含内容
的ID
#htmlcontent {
width：700px，
min-height：400px
}
3.使用JavaScript在加载事件后修改主体的高度和宽度
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;
}