Question

我正在构建一个chrome扩展，当单击扩展图标时，它会在弹出窗口中显示动态更新的HTML。我注意到弹出窗口的大小有时（大约每6次点击一次）太小，无法显示正在显示的文本。通常，高度会非常小（导致需要大量垂直滚动来查看弹出窗口的内容），但有时（大约15次点击一次），弹出窗口的宽度也会受到影响。

我已采取的故障排除步骤没有任何改进

声明<!DOCTYPE html>
在CSS中指定

body { 宽度：700px，最小高度：400px }

\\包含内容的div的id #htmlcontent { 宽度：700px，最小高度：400px }

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;
}

Answer 1

解决OP的问题可能为时已晚，但为了其他人的利益：

问题似乎是Chrome将弹出窗口设置为根据<body>标记内容高度计算的大小。在此计算/渲染周期中，浏览器将执行DOM操作，从而导致弹出窗口的高度错误。

我的解决方案远非理想，但应该适用于简单的用例：

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

我相信这是有效的，因为它将DOM操作的执行推送到新的事件循环，可能是因为chrome正在侦听DOM更改并重新计算/渲染插件。

动态调整Chrome扩展程序弹出窗口高度的大小

1 个答案: