iframe 高度 自适应

javascript 同时被 2 个专栏收录
6 篇文章 0 订阅
4 篇文章 0 订阅
主页面嵌入iframe,但是iframe高度不是自适应的,一旦iframe中的内容超过了iframe框的大小就会出现滚动条,导致页面非常难看。现有的iframe高度自适应有以下4中情况,其中第四种是无法解决的

1.主页和iframe页面属于[color=red]相同域名,不存在js跨域问题[/color]

这种情况很简单,如果你使用jquery
 var frame = $("#frameId");
//拿到你所需要的页面的contents,这个可以结合firebug,打断点查看
var content = frame.contents()[0];
//拿到页面body对象
var body = content.body;
var height = body.scrollHeight
frame.attr("height",height);


如果你没有使用jquery

 var ifm= document.getElementById(id); 
var subDocument = null;
if($.browser.msie){
subDocument = window.frames[id].document;
}else{
subDocument = ifm.contentDocument;
}
if(ifm != null && subDocument != null) {
var height = subDocument.body.scrollHeight;
ifm.height = height;
}


2.主页和iframe嵌入页属于不同域名,但存在合作关系,即,iframe嵌入页面能为你加入js脚本

这种情况,稍麻烦,担不是很复杂,下面这篇博客说的很清楚,可以参考一下
[url]http://www.cnblogs.com/qgd87/archive/2010/07/16/1778980.html[/url]

3.主页和iframe嵌入页面属于不同域名,也没有任何关系,但是主页使用frameset布局

 <frameset cols="*" rows="20,*">
<frame id="master" src="主页需要显示的内容但如抽取成一个页面">
<frame id="customer" src="嵌入页面的url">
</frameset>


[color=red]使用这种模式,需要在项目开始的时候就设计好, 主站也使用这种框架,否则站点操作相应页面会成为一个大问题[/color]

4.主页和iframe嵌入页面属于不同域名,也不使用3中的解决方案

这种情况,暂时还没有解决方案,也可能是我孤陋寡闻,呵呵,有知道的说一下哈
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值