时间戳

首页 > 解决方案 > 如何将 iframe 高度设置为最大值而不是滚动？

javascript - 如何将 iframe 高度设置为最大值而不是滚动？

问题描述

我想知道为什么我的代码在下面，我的高度设置为 150px。我想将我的 iframe 高度设置为与我的内容相同，这样我就不需要滚动了。

我正在使用 react，但我认为普通的 javascript 和 React 是一样的。

我的源代码：

.iframe {
  width: 100%;
  height: 100%
}
<iframe class="iframe" srcdoc="<div style='text-align: center;'>
hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>
</div>"></iframe>

如您所见，我需要滚动。我希望我的身高是100%。任何帮助，将不胜感激。

标签： javascripthtmlcssreactjsiframe

解决方案

将此函数添加到您的 JavaScript 中，您的 iframe 将根据其内容的高度进行调整。

function resizeFrame(object) {
    object.style.height = object.contentWindow.document.documentElement.scrollHeight + 'px';
  }

并在标记中调用函数 onload，如下所示：

<iframe onload="resizeFrame(this)">{$content}</iframe>

小提琴：https ://jsfiddle.net/698pfz1w/

推荐阅读