自适应iframe高度

使用iframe嵌入页面很方便，但必须在父页面指定iframe的高度。如果iframe页面内容的高度超过了指定高度，会出现滚动条，很难看。如何让iframe自适应自身高度，让整个页面看起来像一个整体？在HTML5之前，有很多使用JavaScript的Hack技巧，代码量大，而且很难通用。随着现代浏览器引入了新的ResizeObserver API，解决iframe高度问题就变得简单了。我们假设父页面是index.html，要嵌入到iframe的子页面是target.html，在父页面中，先向页面添加一个iframe：const iframe1 = document.createElement('iframe');iframe1.src = 'target.html';iframe1.onload = autoResize;document.getElementById('sameDomain').appendChild(iframe1);当iframe载入完成后，触发onload事件，然后自动调用autoResize()函数：function autoResize(event) { // 获取iframe元素: const iframeEle = event.target; // 创建一个ResizeObserver: const resizeRo = new ResizeObserver((en ………………………………