通过iframe 嵌套页面的宽高自适应问题

a.html页面中嵌套b.html ，如下

<iframe src="b.html" id="bbb"  width="200" height="36"   frameborder="0" scrolling="auto"></iframe>

由于b.html页面中的DOM节点是动态的，宽高不确定；故iframe的宽高不能定死。

本人最初的方法是在iframe外面嵌套一个div ，iframe的大小是div大小是100%的关系。然后通过控制嵌套的div 宽高去实现；结果，发现不行。因为你看到的div,已经不是这个div了；里面都是iframe中的元素；你动态操作的都是iframe中的元素。故只能换个

那么只剩下设置iframe的宽高动态了；

故应该在b.html页面通过window.parent进行跨域，去操作iframe的大小；或者在a.html页面通过window.frames[0]或 $(“#bbb”).contents()进行跨域，去操作子页面。

实际代码如下：在b.html 中：

var main = $(window.parent.document).find("#bbb");
main.toggleClass("www");

www是用来设置宽高的；

或者在a.html中：

$("#main").load(function(){
var mainheight = $(this).contents().find("body").height();
$(this).height(mainheight);

特别注意，上述方法需要通过服务器端进行，纯静态页面不可以！！

顺道普及下：

Iframe易于嵌套及管理页面，但经常遇到跨域、父子页面访问问题。

对于子页面访问父页面可以兼容性地通过window.Top或window.Parent或window.frameElement等操作。

对于子页面访问父页面，可以contentWindow或contentDocument；例如

var bHeight = iframe.contentWindow.document.body.scrollHeight;
或者 var haha=document.getElementById("iframeName").contentWindow;