iframe 自适应高度

1. 相同域的 iframe 高度自适应,很简单,直接获取iframe的中body的scrollHeight,然后设置iframe的css中witdh。

主页面获取子iframe的方法,参考另一篇文章


2. 不同域的iframe高度自适应

跨域的时候,由于js的同源策略,父页面内的js不能获取到iframe页面的高度。需要一个页面来做代理。
方法如下:假设www.a.com下的一个页面a.html要包含www.b.com下的一个页面b.html。
我们使用www.a.com下的另一个页面agentB.html来做代理,通过它获取iframe页面的高度,并设定iframe元素的高度。

a.html中包含iframe:

<iframe src="http://www.b.com/b.html" id="Iframe" frameborder="0" scrolling="no" style="border:0px;"></iframe>

$("#Iframe").load(function(){
    var ifr = $("<iframe></iframe>");
    ifr.attr("name", "agentB");
    ifr.attr("src", "http://www.b.com/agentB.html");
    ifr.css("display", "none");
    $("body").append(ifr);
});
agentB.html文件:获取b.html的高度,将高度赋值到src 里面
var height = parent.window.ifr.document.body.scrollHeight || parent.window.ifr.document.documentElement.scrollHeight;
var ifr = $("<iframe></iframe>");
ifr.attr("name", "agentA");
ifr.attr("src", "www.a.com/agentA.html#"+height);
ifr.css("display", "none");
$("body").append(ifr);

agentA.html文件,获取url中hash的值,设置 id="Iframe"的高度
var param = window.location.hash;
   var height = param.substr(1);
$(parent.parent.window.document.getElementById("ifrid")).css({"height":height+"px"});





  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值