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

Question

The task was to re-size an embedded iFrame, that would actively change its content without reloading itself or the parent, therefore pretty much all the available answers around wouldn't work, as they suggest to 他们的任务是调整嵌入式iFrame的大小，这将在不重新加载自身或父级的情况下主动更改其内容，因此，几乎所有可用的答案都将无法使用，因为他们建议

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

use onLoad to invoke a Re-size function. 使用onLoad调用调整大小函数。

Answer 1

To solve the issue on my parent page I have the following: index.aspx 要解决我的父页面上的问题，我具有以下内容：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>

And inside my page.aspx's body I have: 在我的page.aspx体内，我有：

<body  onChange="CallThisToResize();">

Then inside the body i have the following JavaScript: 然后在体内，我有以下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);
}

What this does is, everytime the body changes, it gets the new height, sends it to the parent, and then the iframe height is re-sized accordingly. 它的作用是，每次主体更改时，它将获取新的高度，并将其发送给父级，然后相应地调整iframe的高度。

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-12-02 16:09:01

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-12-02 16:09:01

解决方案1
0 已采纳 2015-12-02 16:09:01