根据内容调整iframe大小

framed.html可以发送消息helper.html(iframed)但不发送 home.html(子节点不能与父节点进行跨域通信).

这里的关键是,helper.html能够接收来自消息framed.html,并且还可以沟通与home.html.

所以基本上,当framed.html加载时,它会运行它自己的高度,告诉helper.html它将消息传递给home.html,然后可以调整其中的iframe的大小framed.html.

我们发现,从传递消息最简单的方法framed.html来helper.html是通过URL参数.为此,请指定framed.htmliframe src=''.当它onload发射时,它会评估自己的高度,并在此时将iframe的src设置为helper.html?height=N

这里有一个关于facebook如何处理它的解释,这可能比我的上面稍微清楚一点!

在www.foo.com/home.html,需要以下javascript代码(这可以从任何域上的.js文件加载,顺便说一句..):

在www.bar.net/framed.html:

内容www.foo.com/helper.html:

如果您不需要处理来自其他域的iframe内容,请尝试使用此代码,它将完全解决问题并且很简单:

https://developer.mozilla.org/en/DOM/window.postMessage

window.postMessage()

window.postMessage是一种安全启用跨源通信的方法.通常,当且仅当执行它们的页面位于具有相同协议(通常是http),端口号(80是http的默认值)和主机(模数)的位置时,才允许不同页面上的脚本相互访问. document.domain由两个页面设置为相同的值).window.postMessage提供了一种受控机制,可以在正确使用时以安全的方式规避此限制.

摘要

window.postMessage,当被调用时,会导致在任何必须执行的挂起脚本完成时在目标窗口调度MessageEvent(例如,如果从事件处理程序调用window.postMessage,之前设置的挂起超时等,则保留事件处理程序. ).MessageEvent具有类型消息,一个data属性,设置为提供给window.postMessage的第一个参数的字符串值,一个origin属性,对应于窗口调用window.postMessage时窗口中主文档的原点.调用了postMessage,并调用了一个source属性,该属性是调用window.postMessage的窗口.(事件的其他标准属性与其预期值一起出现.)

该iframe的调整器库使用的postMessage保持一个iFrame尺寸为它的内容,随着MutationObserver检测改动的内容和不依赖于jQuery的.

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

jQuery:跨域脚本编写的好处

http://benalman.com/projects/jquery-postmessage-plugin/

有调整iframe窗口大小的演示......

http://benalman.com/code/projects/jquery-postmessage/examples/iframe/

本文介绍如何删除对jQuery的依赖... Plus有很多有用的信息和其他解决方案的链接.

http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/

Barebones的例子......

http://onlineaspect.com/uploads/postmessage/parent.html

关于window.postMessage的HTML 5工作草案

http://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html#crossDocumentMessages

John Resig关于跨窗口消息传递

http://ejohn.org/blog/cross-window-messaging/

使用jQuery的最简单方法:

$("iframe")
.attr({"scrolling": "no", "src":"http://www.someotherlink.com/"})
.load(function() {
    $(this).css("height", $(this).contents().height() + "px");
});

http://www.phinesolutions.com/use-jquery-to-adjust-the-if​​rame-height.html上的解决方案效果很好(使用jQuery):

我不知道你需要增加30个长度...... 1对我有用.

仅供参考:如果您的iFrame上已经有"height"属性,则只需添加style ="height:xxx".这可能不是你想要的.