跨域动态设置 iframe 高度答案

【问题标题】：Cross Domain set iframe height dynamically跨域动态设置 iframe 高度
【发布时间】：2016-01-12 00:51:54
【问题描述】：

我查找了许多跨域 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

【问题讨论】：

iframe 是否与父页面在同一个域中？
不，这就是我提到跨域的原因
iframe 包含一个完整的网络应用程序，例如工作门户
这里有一些有趣的事情css-tricks.com/cross-domain-iframe-resizing
或者这个其他stackoverflow问题stackoverflow.com/questions/22086722/…

标签： javascript jquery html iframe

【解决方案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

该库负责调整大小并跨域。检查文档。

【讨论】：

我不知道为什么我的答案被否决了该库完全符合 OP 的要求，但它是经过测试和使用的 git 存储库。
此库无法解决跨域 iframe 调整大小的问题