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

Question

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

tak*_*ola 4 html javascript css google-chrome google-chrome-extension

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

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

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

body {width:700px,min-height:400px}

包含内容的div的内容
#htmlcontent {width:700px,min-height: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);
}

Run Code Online (Sandbox Code Playgroud)

使用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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 5

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

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

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

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

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	10 年，10 月前
查看次数：	4347 次
最近记录：	9 年，9 月前