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对象的高度受限制而显示不出来。

发布了2 篇原创文章 · 获赞 0 · 访问量 2533
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览