如何调整来自其他域的 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
测量滚动条
我发现了另一篇关于如何使用滚动高度来尝试调整表单大小的帖子。理论上它工作得很好，但我无法使用 iframe 滚动高度正确应用它。
document.body.scrollHeight
这显然使用了主体高度(无法访问这些属性 100% 基于客户端显示 Canvas 而不是 x 域文档高度)
我尝试使用 jQuery 来获取 iframe 高度
$('#frameId').Height()
$('#frameId').clientHeight
$('#frameId').scrollHeight
chrome 和 ie 中的返回值不同 - 或者根本没有意义。 问题是框架内的所有内容都被拒绝 - 甚至滚动条......
计算样式
但是，如果我检查 iframe 的 chrome 中的元素，它会严重显示 iframe 内的文档尺寸(使用 jQuery x-domain 获取 iframe.heigh - 访问被拒绝)
计算出的 CSS 
中没有任何内容
现在 chrome 是如何计算的？ (编辑-浏览器使用其内置渲染引擎重新渲染页面来计算所有这些设置 - 但没有附加到任何地方以防止跨域欺诈..所以..)
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>
并且在调用者域上，他们只需在同一位置添加 middle_frame HTML 和 easyXDM.js 即可。就像父文件夹一样 - 然后您可以访问相关目录或专门为您提供的包含的文件夹。
最佳答案
与 Sean 提到的类似，您可以使用 postMessage。我花了很多时间尝试不同的方法来跨域调整 iframe 的大小，但没有运气，直到我偶然发现了 David Walsh 写的这篇很棒的博客文章:http://davidwalsh.name/window-iframe
这是我的代码和大卫的解决方案的组合。我的解决方案专门针对调整 iframe 的大小。
在子页面中，找到页面的高度并将其传递给父页面(包含 iframe)。将 element_id 替换为您的元素 ID(html、body 等)。
<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/11866476/