【技术】iframe嵌入页面自适应目标页面的高度

今天chrafz在给用户做一个布局时遇到一个问题,当使用html5的iframe标签做页面嵌入动作时,页面的搞定没有办法设置为源页面的搞定,这可是一个头疼的问题,不显示滚动条吧内容显示不全,如果显示严重影响美观,最后翻看了html5关于iframe的文档,但是官方并没有满足该要求的属性,没办法只用用js做一个动态调用了。下面我们就来看看如何用js来搞定这个问题的。

方案一

这个是在网上查找到的教程,用的JavaScript来获取源页面的高度然后赋值给iframe标签中的heaght元素实现自使用高度。

代码

  1. <!–html代码  在代码中需要添加一个 onload=”iFrameHeight();” 参数用来获取高度值   还有一个 id=”iframe” 让js识别–>
  2. <iframe src=“http://www.chrafz.com” id=“iframe” frameborder=“0” scrolling=“no” onload=“iFrameHeight();” width=“100%”></iframe>
  3. <!–js代码 放置到页面body标签中即可–>
  4. function iFrameHeight() {
  5.     var ifm = document.getElementById(“iframe”);
  6.     var subWeb = document.frames ? document.frames[“iframe”].document : ifm.contentDocument;
  7.     if (ifm != null && subWeb != null) {
  8.          ifm.height = subWeb.body.scrollHeight;
  9.     }
  10. }

优点:

  1. 无需加载jQuery库简单易操作;

缺点:

  1. 需要判断浏览器的高度,处理逻辑稍有复杂;

方案二

使用jQuery的方式实现,现在大多数网站都是基于jQuery开发的,一般都调用了jQuery库,所以用这个方法非常实用,而且用jQuery实现比JavaScript性能要好。

引用页面放置以下代码

  1. //注意:下面的代码是放在iframe引用的子页面中调用
  2. $(window.parent.document).find(“#iframe”).load(function(){
  3. var main = $(window.parent.document).find(“#iframe”);
  4. var thisheight = $(document).height()+30;
  5. main.height(thisheight);
  6. });

目标页面放置代码

  1. //注意:下面的代码是放在和iframe同一个页面调用
  2. $(“#iframe”).load(function(){
  3. var mainheight = $(this).contents().find(“body”).height()+30;
  4. $(this).height(mainheight);
  5. });

这个方法布置代码比较难,要改两个页面,但是性能好,所以大家仔细选择看看那个适合自己使用。

本文由 @张弦先生 原创发布.如若转载,请注明出处:张弦先生-chrafz.com » 【技术】iframe嵌入页面自适应目标页面的高度
分享到:
赞(1) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏