通过iframe 嵌套页面的宽高自适应问题
2016-06-22 17:08
507 查看
a.html页面中嵌套b.html ,如下
由于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 中:
www是用来设置宽高的;
或者在a.html中:
特别注意,上述方法需要通过服务器端进行,纯静态页面不可以!!
顺道普及下:
Iframe易于嵌套及管理页面,但经常遇到跨域、父子页面访问问题。
对于子页面访问父页面可以兼容性地通过window.Top或window.Parent或window.frameElement等操作。
对于子页面访问父页面,可以contentWindow或contentDocument;例如
<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;
相关文章推荐
- JQuery与iframe交互实现代码
- 用expression的一行代码解决iframe挂马的问题
- 用jquery修复在iframe下的页面锚点失效问题
- Firefox返回时Iframe的显示Bug的解决方法
- smarty巧妙处理iframe中内容页的代码
- 一行代码解决网站防挂IFRAME木马方案,小鸽子序列(灵儿)
- asp.net 文件上传与刷新与asp.net页面与iframe之间的数据传输
- div层跨越iframe帧显示在上面的解决方法附代码
- IE浏览器IFrame对象内存不释放问题解决方法
- iframe如何动态创建及释放其所占内存
- JS中Iframe之间传值的方法
- JS动态修改iframe高度和宽度的方法
- JS是否可以跨文件同时控制多个iframe页面的应用技巧
- JavaScript中iframe实现局部刷新的几种方法汇总
- 对frameset、frame、iframe的js操作示例代码
- 通过隐藏iframe实现无刷新上传文件操作
- js改变Iframe中Src的方法
- iframe中子父类窗口调用JS的方法及注意事项
- 通过伪协议解决父页面与iframe页面通信的问题
- JS加载iFrame出现空白问题的解决办法