动态 Iframe 调整大小和 Window 焦点滚动错误

Question

所以我一直在四处寻找适合我的解决方案，我几乎找到了，但我运行遇到了一个小故障。由于我的产品的限制，我需要在 iframe 中加载某些页面。我无法安装任何额外的库。

我的子页面有 div，点击时会隐藏和取消隐藏，因此内容会改变大小。这段代码几乎可以工作，高度扩大了，但不会再次收缩。

<script>
function checkFocus() {
  if(document.activeElement == document.getElementsByTagName("iframe")[1]) {
    test.style.height = test.contentWindow.document.documentElement.scrollHeight + 'px';
  }
}

window.setInterval(checkFocus, 1000); 
</script>

<iframe id="test" src="/SitePages/test3.aspx" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:50px;width:100%;border:none;overflow:hidden;"></iframe>

如果我加入：

test.style.height = "0px";

之前：

test.style.height = test.contentWindow.document.documentElement.scrollHeight + 'px';

然后子页面再次收缩，除了我在主页上遇到一个奇怪的滚动错误，它不断迫使页面向上滚动。有什么解决办法吗？

感谢阅读！

Answer 1

我想通了。添加

window.focus();

之后

test.style.height = test.contentWindow.document.documentElement.scrollHeight + 'px';

已解决问题。这只是将焦点从 iframe 上移开，并将其放回主 window 中，因为它正在循环。

动态 Iframe 调整大小和 Window 焦点滚动错误

Dynamic Iframe Resize and Window Focus Scroll Bug

javascript

iframe

resize