重新调整主动更改其高度的iFrame的大小

本文关键字：高度 iFrame 新调整 调整 | 更新日期: 2023-09-27 18:25:19

任务是重新调整嵌入式iFrame的大小，这将在不重新加载自身或父框架的情况下主动更改其内容，因此，正如他们向建议的那样，几乎所有可用的答案都不起作用

<iframe src="url" id="iframe1" marginheight="0" frameborder="0" onLoad="autoResize('iframe1');"></iframe>

使用onLoad来调用Re-size函数。

重新调整主动更改其高度的iFrame的大小

要解决父页面上的问题，我有以下内容：index.aspx

<div>
 <script>
  function resizeIframe(height) {
    document.getElementById('frameUpload').height = height;
   }
  </script>
<iframe id="iframe" src="/child/page.aspx"  marginheight="0" frameborder="0"></iframe>

在我的page.aspx的正文中，我有：

<body  onChange="CallThisToResize();">

然后在体内我有以下JavaScript：

<script type="text/javascript">
function CallThisToResize() {
    var body = document.body,
html = document.documentElement;
    var height = Math.max(body.scrollHeight, body.offsetHeight,
                   html.clientHeight, html.scrollHeight, html.offsetHeight);
    parent.resizeIframe(height);
}

这样做的目的是，每次身体发生变化时，它都会获得新的高度，并将其发送给父对象，然后相应地重新调整iframe高度的大小。

相关文章：