admin管理员组文章数量:1399905
I am building a chrome extension which has shows dynamically updated HTML in the popup window when the extension icon is clicked. I have noticed that the size of the popup window is sometimes (about once in every 6 clicks) too small to show the text being displayed. Usually, it is the height that is very reduced (leading to a lot of vertical scrolling being required to view the content of the popup) but sometimes (once in about 15 clicks), the width of the popup is affected as well.
Troubleshooting steps I have already taken with no improvement
- Declared
<!DOCTYPE html> Specified in CSS
body { width: 700px, min-height: 400px }
\\ id of div containing the content
#htmlcontent { width: 700px, min-height: 400px }
3. Used javascript to modify body height and width after onload event
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);
}
Using an iFrame is not a practical solution as the content being displayed is local to the machine
There are no hidden elements in the HTML tree
Code snippets
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 plete
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;
}
I am building a chrome extension which has shows dynamically updated HTML in the popup window when the extension icon is clicked. I have noticed that the size of the popup window is sometimes (about once in every 6 clicks) too small to show the text being displayed. Usually, it is the height that is very reduced (leading to a lot of vertical scrolling being required to view the content of the popup) but sometimes (once in about 15 clicks), the width of the popup is affected as well.
Troubleshooting steps I have already taken with no improvement
- Declared
<!DOCTYPE html> Specified in CSS
body { width: 700px, min-height: 400px }
\\ id of div containing the content
#htmlcontent { width: 700px, min-height: 400px }
3. Used javascript to modify body height and width after onload event
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);
}
Using an iFrame is not a practical solution as the content being displayed is local to the machine
There are no hidden elements in the HTML tree
Code snippets
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 plete
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;
}
- Can you post your code or a link to you site? – Justin Breiland Commented Jan 9, 2015 at 21:31
- Did you check if there is a hidden element in the HTML tree? The popup of the Chrome Extensions don't resize if there is a hidden element in the HTML tree. That is, basically the whole page which is hiding will prevent to resize the popup frame. The solution is: document.getElementById("hiddenDiv").innerHTML = ""; – Dayton Wang Commented Jan 10, 2015 at 0:57
- Absolutely no hidden elements in the HTML. – takinola Commented Jan 10, 2015 at 2:01
1 Answer
Reset to default 6It's probably way too late to solve the OP's problem, but for the benefit of others:
The problem seems to be that Chrome is animating the popup to a size calculated on the height of content in the <body> tag. DOM manipulation will be executed by the browser during this calculation/rendering cycle and thus cause the popup to be the wrong height.
My solution is far from ideal but should work for simple use cases:
setTimeout(function(){
// DOM manipulation stuff
}, 0);
I believe this works because it pushes the execution of DOM manipulation onto a new event loop, probably because chrome is listening for a DOM change and re-calculating/rendering the plugin.
本文标签： javascriptDynamically resizing Chrome Extension Popup Window HeightStack Overflow
版权声明：本文标题：javascript - Dynamically resizing Chrome Extension Popup Window Height - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744125396a2591932.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论