响应内容的浏览器窗口答案

【问题标题】：Browser Window Responsive to Content响应内容的浏览器窗口
【发布时间】：2020-04-28 15:44:31
【问题描述】：

我在其他地方找不到与此相关的任何问题或信息，所以我想我会发布一个问题。有没有办法让BrowserWindow 响应index.html 的内容？

我知道您可以通过使用resizeTo 或remote 手动更改BrowserWindow 的大小来实现此目的，但您需要知道将其设置为的显式大小。

有没有办法让窗口简单地响应内容，以便随着文档的 body 增长，窗口也会增长？

【问题讨论】：

标签： javascript node.js responsive-design electron responsive

【解决方案1】：

也许一个简单的方法是：创建一个带有 setTimeout 的计时器来检查 document(document.body) 的大小是否发生变化；为此，使用getComputedStyle 方法和存储最后大小的“静态函数”变量。

function getDocumentWidth(){//returns current document width
  return window.getComputedStyle(document.querySelector('body'), null).getPropertyValue("width");
}

function checkDocumentWidthChanged(callback){//verify by document width change, execute a callback function argument if it happened and resume the verification call
  let ns=getDocumentWidth()
  
  if(this.lastSize!=ns){
    this.lastSize=ns
    callback()
   }
   
   setTimeout(function(){checkDocumentWidthChanged(callback);}, 500);
   
}

checkDocumentWidthChanged.lastSize=getDocumentWidth();//function static var to store the last document size

checkDocumentWidthChanged(function(){//stat the loop
  console.log('New document size:'+checkDocumentWidthChanged.lastSize)
})

document.body.addEventListener('click',function(evt){//Set an event listener to test the proccess
  this.style.width=300+Math.floor(Math.random() * 100)+'px'
  console.log(this.style.width)
})

<body>
Click here to change the document body size or change the browser size.
</body>

【讨论】：

您的方法肯定会奏效，但我可以看到它遇到了“问题”，而且我真的不喜欢不断轮询文档以查看其大小是否改变的想法。不过还是谢谢你的建议