iframe的打怪1

自从页面中嵌入iframe，总是有各种悲伤，哎，还是上个情景吧：

1、打怪情景：

<body>

</body>

出现的问题：content的iframe无法根据高度自适应。

2、取经旅途

大师兄：找了个看起来还不错的jquery插件，jquery-iframe-auto-height(地址：https://github.com/house9/jquery-iframe-auto-height)

试了下，貌似ok，就放着当成了盾牌。

过了一段时间，发觉遇到不同的怪物打不过啊，哎，结果师傅真的被抓走了。。。

八戒：大师兄，师傅被抓走了！

大师兄：一看不对啊，原来盾牌好久不升级了，估计各种问题，哎，算了，还是想想别的办法吧。

大师兄找了个秘籍指引（http://caibaojian.com/iframe-adjust-content-height.html）关键就是下面的内容：

 1 function setIframeHeight(iframe) {
 2 if (iframe) {
 3 var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
 4 if (iframeWin.document.body) {//如果iframe下body有内容，则获取其高度，以便后续进行调整
 5 iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
 6 }
 7 }
 8 };
 9 
10 window.onload = function () {
11 setIframeHeight(document.getElementById('content'));
12 };

大师兄把秘籍放到了上面的页面中，我了个擦，好像能运行啊，秘籍指引下找到了师傅。

师傅，师傅，你还好吗？？

师傅不回答。。。

oh，师傅已经昏迷了。页面时好时坏，有时候正确显示，有时候长度差了一大截。

大师兄再看了一下，哎，不同浏览器，load处理方式还不太一样，可能前后顺序啥的还有速度的导致调整的时候没显示完全。为了能够正确显示，大师兄加了一个setTimeout，给了一下延迟。

结果是这样的：

function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
}
};

window.onload = function () {
setTimeout("setIframeHeight(document.getElementById('content'));",500)
};

加了个延迟，处理方式不同，总归是会调用的。把调整页面的高度放到后面，这时候基本需要展示的东西都出来了，再去调整，高度也就不会差了。

就这样，师傅，终于醒过来了。。。

续集：

师傅醒过来了，正常了一阵后，自己练了点别的技能，什么自动伸缩，能高能矮，时大时小~~~

但是此时window的load已经执行完了，因此没有触发高度调整，导致师傅高的时候碰到了天花板，又晕过去了。。。嗝屁ing~~~~~~

大师兄想了想：

既然多加的东西改变了高度，在高度改变的地方，加个高度调整不就好了，师傅就碰不到天花板了！

果断，每当触发高度改变后，加上高度调整：parent.window.setIframeHeight()；//假定该函数是在iframe的父窗口中的。

师傅就这样，又恢复了正常，醒了~妈妈再也不用担心我的师傅忽高忽矮了~~~~哈哈

关于界面的高度：http://www.cnblogs.com/luckyflower/p/4359219.html