contentDocument实现iframe自适应子页面高度

     刚开通博客不久，经常在看到前辈和大牛在博客上分享技术经验，就想用博客来记录一些遇到过的问题和解决问题的经验。

     前两天一朋友和我讨论到用iframe内嵌网页如何做到让iframe自适应子页面的高度。我之前也遇到过同样的问题，如果iframe在不设置高度的情况下，默认高度为150px（在谷歌浏览器下亲试，其他浏览器未实验），如果iframe通过js引用其他子页面进来也无法像div那样通过内容的大小来改变iframe的高度问题，也就是说，内嵌子页面的大部分内容都会被iframe外框的高度限制从而显示不出来。

     当然如果需要切换的每个子页面的高度都一样的话，那么预设iframe的高度是一种很方便有很简单的方式，如果每个子页面的高度不一样，那么就需要用js来改变iframe的高度了，由于项目中只用到一个js文件，所有的页面引用的都是这个js文件，所以问题就变得比较麻烦。按理说，我们可以通过获取子页面的高度来设置iframe的高度，在onload方法中可以获取到父页面和子页面的高度，但由于是点击式切换页面导致this所指的对象不同，在onload方法中获取的子页面高度数据没有办法传递到success()方法中。在一下js方法中用console.log(this)；可以知道获取第一个页面高度的this对象和获取到第二个页面高度的this对象还有sucess()方法中的this对象都是不同的。所以利用对象存储的方式也不行。

 这是前端代码：

     之后通过查询资料得知contentDocument属性可以直接获取iframe内嵌子页面的document对象（contentDocument详细用法参考：http://blog.csdn.net/alex8046/article/details/51456098）

    由于调用sucess()方法的对象在父窗口，所以在sucess()中的document对象是父窗口的document对象，可以直接获取到iframe标签对象，从而对irame标签的高度进行设置，

以下代码中，two是iframe内嵌子页面的body的id值

    

     由于js文件的执行顺序是通过html的调用来决定的，此文件的执行顺序为：

                          父页面.onload --> sucess()方法 --> 子页面.onload

   当父页面加载完毕时调用onload方法，之后点击li标签时出发sucess()方法，在sucess方法中设置跳转页面，当页面跳转完毕，子页面加载完成时，子页面调用了onload方法。

在子页面加载时的this.parent可以获取到父页面的window对象，通过window对象获取父页面的body对象并设置body对象的高度加上子页面的高度。之后再设置iframe标签的高度为子页面的高度。如果设置iframe高度不设置父页面的body高度的话，iframe的高度会因为body对象的高度受限制而显示不出来。