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.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744125397a4559593.html
评论列表（0条）