跨域动态设置 iframe 高度
Posted
技术标签:
【中文标题】跨域动态设置 iframe 高度【英文标题】：Cross Domain set iframe height dynamically 【发布时间】：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 border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#333333" style="border:1">
<tr>
<td valign="top"><table border="0" cellspacing="0" cellpadding="0">
</td>
</tr>
</table>
<iframe src="http://mywebapplication.com" ></iframe
<table border="0" cellpadding="0" cellspacing="0" bgcolor="53575f">
<tr>
<td align="center" ><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" 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 或者这个其他***问题***.com/questions/22086722/… 【参考方案1】：尽管问题与解决 OP 自己的个人代码的问题有关。他们是一个久经考验的库，可用于解决将 iframe 调整为内容高度的问题。这个库涉及跨域，所以我认为值得一提。
https://davidjbradshaw.github.io/iframe-resizer/
您将两个文件一个放在父级中，一个放在子级（iframe）中
在你的父母中：
<style>iframewidth:100%</style>
<iframe src="http://anotherdomain.com/iframe.html" scrolling="no"></iframe>
<script>iFrameResize(log:true)</script>
在您的孩子中，您只需添加此文件：
iframeResizer.contentWindow.min.js
该库负责调整大小并跨域。检查文档。
【讨论】：
我不知道为什么我的答案被否决了该库完全符合 OP 的要求，但它是经过测试和使用的 git 存储库。 此库无法解决跨域 iframe 调整大小的问题以上是关于跨域动态设置 iframe 高度的主要内容，如果未能解决你的问题，请参考以下文章