如何调整来自另一个域的 iframe 的大小？
过去几天，我一直在尝试将 iframe 集成到站点中。这是一个短期解决方案，而另一方开发和 API(可能需要几个月......) 因为这是我们确实想使用 easyXDM 的短期解决方案——我可以访问其他域，但要求他们按原样添加 p3p header 已经够困难了......
3 个 iframe
我找到的最接近的解决方案是 3 个 iframe - 但它会影响 chrome 和 safari，所以我不能使用它。
在 chrome 中打开
http://css-tricks.com/examples/iFrameResize/crossdomain.php#frameId=frame-one&height=1179
测量滚动条
我找到了另一篇关于如何使用 scrollheight 来尝试调整表单大小的帖子。理论上它运行良好，但我无法使用 iframe 滚动高度正确应用它。
document.body.scrollHeight
显然使用了主体高度(无法访问这些属性 100% 是基于客户端显示 canvaz 而不是 x-domains 文档高度)
我尝试使用 jQuery 获取 iframe 高度
$('#frameId').Height()
$('#frameId').clientHeight
$('#frameId').scrollHeight
chrome 和 ie 的返回值不同 - 或者根本没有意义。 问题是框架内的所有内容都被拒绝 - 甚至滚动条......
计算样式
但是如果我在 iframe 的 chrome 中检查和元素，它会严重显示 iframe 内的文档尺寸(使用 jQuery x 域获取 iframe.heigh - 访问被拒绝)
计算出的 CSS 
中没有任何内容
现在 chrome 是如何计算的？ (edit- 浏览器使用其内置渲染引擎重新渲染页面以计算所有这些设置 - 但没有附加到任何地方以防止跨域欺诈..所以..)
HTML4
我阅读了 HTML4.x 的规范，它说应该有通过 document.element 公开的只读值，但通过 jQuery 拒绝访问
代理框架
我沿着代理网站的路线返回并计算哪个是好的..直到用户通过 iframe 登录并且代理获得登录页面而不是实际内容。同样对于某些调用该页面两次的人来说也是 Not Acceptable
http://www.codeproject.com/KB/aspnet/asproxy.aspx
http://www.johnchapman.name/aspnet-proxy-page-cross-domain-requests-from-ajax-and-javascript/
重新渲染页面
我没有走这么远，但那里有 jscript 引擎可以查看源代码并根据源文件重新呈现页面。但它需要破解那些 jscripts.. 这对商业实体来说不是理想的情况...... 还有一些调用纯 Java 小程序或服务器端呈现
http://en.wikipedia.org/wiki/Server-side_JavaScript
http://htmlunit.sourceforge.net/ <-java 不是 jscript
所有这些都可以通过 HTML5 套接字来完成。但 easyXDM 是非 HTML5 投诉页面的绝佳回退。
解决方案 1 非常棒的解决方案!
使用 easyXDM
在您的服务器上，您以以下形式设置页面
<html>
<head>
<script src="scripts/easyXDM.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
var transport = new easyXDM.Socket(/** The configuration */{
remote: "http://www.OTHERDOMAIN.example/resize_intermediate.html?url=testpages/resized_iframe_1.html",
//ID of the element to attach the inline frame to
container: "embedded",
onMessage: function (message, origin) {
var settings = message.split(",");
//Use jquery on a masterpage.
//$('iframe').height(settings[0]);
//$('iframe').width(settings[1]);
//The normal solution without jquery if not using any complex pages (default)
this.container.getElementsByTagName("iframe")[0].style.height = settings[0];
this.container.getElementsByTagName("iframe")[0].style.width = settings[1];
}
});
</script>
</head>
<body>
<div id="embedded"></div>
</body>
在调用者域中，他们只需在同一位置添加 intermediate_frame HTML 和 easyXDM.js。就像父文件夹一样 - 然后您可以访问相关目录或只为您包含的文件夹。
最佳答案
与 Sean 提到的类似，您可以使用 postMessage。我花了很多时间尝试不同的方法来跨域调整 iframe 的大小，但直到我偶然发现 David Walsh 的这篇很棒的博客文章之前，我都没有运气:http://davidwalsh.name/window-iframe
这是我的代码和 David 的解决方案的组合。我的解决方案专门用于调整 iframe 的大小。
在子页面中，找到页面的高度并将其传递给父页面(包含 iframe)。将 element_id 替换为您的元素 ID(html、正文等)。
<script>
function adjust_iframe_height(){
var actual_height = document.getElementById('element_id).scrollHeight;
parent.postMessage(actual_height,"*");
//* allows this to post to any parent iframe regardless of domain
}
</script>
<body onload="adjust_iframe_height();">
//call the function above after the content of the child loads
在父窗口中，添加这段代码。将 iframe_id 替换为您的 iframe ID:
<script>
// Create IE + others compatible event handler
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
// Listen to message from child window
eventer(messageEvent,function(e) {
console.log('parent received message!: ',e.data);
document.getElementById('iframe_id').height = e.data + 'px';
},false);
</script>
如果打开控制台，您将看到控制台日志中打印的高度。这将帮助您进行调试，这就是我将其留在那里的原因。
最好的， 贝克
关于javascript - 跨域 iframe 调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5908676/