Question

我已经查找了很多跨域iframe高度的示例，但没有一个能够解决问题。

我在下面给出了一个简单的HTML。我想根据内容的高度调整其中的iframe大小。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


</head>

<body >
<table width="780" height="406" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#333333" style="border:1">
  <tr>
     <td valign="top"><table width="778" border="0" cellspacing="0" cellpadding="0">
     </td>
  </tr>    
    </table>


      <iframe src="http://mywebapplication.com" width="100%" ></iframe

      <table width="780" border="0" cellpadding="0" cellspacing="0" bgcolor="53575f">
        <tr>
          <td align="center" height="38"><span class="Footer">All Rights Reserved © ABC 2009-2012. 


          </td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>

我尝试了什么

使用添加到iframe的第二个javascript文件将postMessage发送回父级。

包含iframe的HTML网页

  <iframe src="http://mywebapplication.com" width="100%" id="zino_iframe"></iframe>
        <script type="text/javascript">
        var zino_resize = function (event) {
            alert("sds");
            var zino_iframe = document.getElementById('zino_iframe');
              if (event.origin !== "http://hrcraft.noviavia.com") {
                return;
            }
            //alert(zino_iframe);
            if (zino_iframe) {
                alert(event.data);
                zino_iframe.style.height = event.data + "px";
            }
        };
        if (window.addEventListener) {
            window.addEventListener("message", zino_resize, false);
        } else if (window.attachEvent) {
            window.attachEvent("onmessage", zino_resize);
        }

window.addEventListener("message", myListener, false);

function myListener(event) {
    if (event.origin !== "http://hrcraft.noviavia.com") {
        return;
    }
    //do something
}

发送身高的功能也会添加到mywebapplication的母版页上。

我一直在关注这个例子

http://zinoui.com/blog/cross-domain-iframe-resize

Answer 1

虽然问题与解决OP自己的个人代码问题有关。它们是经过试验和测试的库，可用于解决将iframe大小调整为内容高度的问题。这个库处理跨域，所以我认为值得一提。

https://davidjbradshaw.github.io/iframe-resizer/

您将两个文件放在子级（iframe）中的父文件中

在你父母的

：

<style>iframe{width:100%}</style>
<iframe src="http://anotherdomain.com/iframe.html" scrolling="no"></iframe>
<script>iFrameResize({log:true})</script>

在您的孩子中，您只需添加此文件：

iframeResizer.contentWindow.min.js

图书馆负责调整大小和跨域。检查文档。

跨域动态设置iframe高度

1 个答案: