zoukankan      html  css  js  c++  java
  • 同域iframe的高度自适应

    1. 引子
    2. 父页面里控制子页面
    3. 子页面里控制父页面

    一、引子

    我们先看一个示例,有两个页面,1.html通过iframe嵌入2.html,两个页面都是同域的

    1.html

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset='utf-8' />
        <title>1.html</title>
      </head>
      <body>
         <iframe id="ifr" src="2.html" frameborder="0" width="100%"></iframe>
      </body>
    </html>
    

    2.html,很多P元素将高度撑高一些

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>2.html</title>
      </head>
      <body>
    	 <p>这是一个ifrmae,嵌入在http://snandy.github.io/lib/iframe/1.html里 </p>
    	 <p>根据自身内容调整高度</p>
    	 <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
      </body>
    </html>
    

    此时,浏览器访问1.html,效果如图

    可以看到,嵌入的iframe出现了滚动条,需求是不想出现滚动条,页面多高就显示多少。我们不能随便给iframe设个高度,因为你不知道嵌入的iframe会有多高(内容是动态生成的)。

    二、解决方法

    解决方法其实很简单,无非是给1.html里的iframe设个高度,高度的值即为2.html的内容高度。要注意的是2.html的内容高度需要页面完全载入(onload)后获取。

    有两种方式 

    A. JS代码写在父页面,即父页面(1.html)里获取子页面(2.html)文档对象,当iframe载入后(load)获取高度,将此高度值赋值给iframe标签

    开始测试时使用iframe的contentWindow的load事件,但所有浏览器均不执行。最后使用iframe的load事件,在父页面1.html底部加入如下JS代码

    <script type="text/javascript">
      // 计算页面的实际高度,iframe自适应会用到
      function calcPageHeight(doc) {
          var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
          var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)
          var height  = Math.max(cHeight, sHeight)
          return height
      }
      var ifr = document.getElementById('ifr')
      ifr.onload = function() {
          var iDoc = ifr.contentDocument || ifr.document
          var height = calcPageHeight(iDoc)
          ifr.style.height = height + 'px'
      }
    </script>

    这里有两个细节:

    1. 取iframe内的文档对象,标准浏览器使用contentDocument属性,IE低版本(IE6,7,8)使用document属性。

    2. calcPageHeight函数计算页面的实际高度,标准浏览器使用document.documentElement,低版本IE使用document.body,默认取clientHeight,出现滚动条的取scrollHeight,最后取两个值中最大的。

    B. JS代码写在子页面,即子页面在window load后计算高度,将此高度值赋值给父页面的iframe

    在子页面(2.html)底部加入如下代码

    <script>
    	// 计算页面的实际高度,iframe自适应会用到
    	function calcPageHeight(doc) {
    	    var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
    	    var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)
    	    var height  = Math.max(cHeight, sHeight)
    	    return height
    	}
    	window.onload = function() {
    		var height = calcPageHeight(document)
    		parent.document.getElementById('ifr').style.height = height + 'px' 		
    	}
    </script>
    

      

    通过这两种方式都可以实现iframe的高度自适应,可以看到重新设置iframe的高度后,其滚动条都去掉了。

    线上示例:http://snandy.github.io/lib/iframe/1.html

    相关:

    http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-78799536

    http://msdn.microsoft.com/en-us/library/ie/cc196985(v=vs.85).aspx

  • 相关阅读:
    React在componentDidMount里面发送请求
    React 术语词汇表
    React里受控与非受控组件
    React和Vue等框架什么时候操作DOM
    【LeetCode】79. Word Search
    【LeetCode】91. Decode Ways
    【LeetCode】80. Remove Duplicates from Sorted Array II (2 solutions)
    【LeetCode】1. Two Sum
    【LeetCode】141. Linked List Cycle (2 solutions)
    【LeetCode】120. Triangle (3 solutions)
  • 原文地址:https://www.cnblogs.com/snandy/p/3902337.html
Copyright © 2011-2022 走看看