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

方案一

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

代码

  1. <!--html代码  在代码中需要添加一个 onload="iFrameHeight();" 参数用来获取高度值   还有一个 id="iframe" 让js识别-->
  2. <iframe src="https://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. });

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