• 跨子域的iframe高度自适应


    一、跨子域的iframe高度自适应

    比如 'a.jd.com/3.html' 嵌入了 'b.jd.com/4.html',这种跨子域的页面

    3.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset='utf-8' />
        <title>1.html</title>
        <script type="text/javascript">
            document.domain = 'jd.com'
        </script>
      </head>
      <body>
         <iframe id="ifr" src="b.jd.com/4.html" frameborder="0" width="100%"></iframe>
      </body>
    </html>

    4.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>2.html</title>
        <script type="text/javascript">
            document.domain = 'jd.com'
        </script>
      </head>
      <body>
         <p>这是一个ifrmae,嵌入在3.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>
    <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>
      </body>
    </html>

    可以看到与同域引入对比,只要在两个页面里都加上document.domain就可以了

    二、完全跨域的iframe高度自适应

    分别有以下资源

    • 页面 A:http://localhost:9001/A.html
    • 页面 B:http://localhost:9001/B.html
    • 页面 C:http://t.com:9001/C.html

    大关系就是  A->C->B ,A与B同域名,B作为中间人,用地址栏传参形式,把C的高传出来

    这四个资源有如下关系

    1. A里嵌入C,A和C是不同域的,即跨域iframe

    2. C里嵌入B,C和B是不同域的,但A和B是同域的

    3. C里嵌入D.js,D.js放在和A同域的项目里

    通过一个间接方式实现,即通过一个隐藏的B.html来实现高度自适应。

    A.html

    嵌入页面C: 

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset='utf-8' />
        <title>A.html</title>
      </head>
      <body>
        <iframe id="ifr" src="http://t.com:9001/C.html" frameborder="0" width="100%"></iframe>
    	<script type="text/javascript">
    		
    		
    	</script>
    
      </body>
    </html>
    

      

    B.html

    嵌入在C页面中,它是隐藏的,通过parent.parent访问到A,再改变A的iframe(C.html)高度,这是最关键的,因为A,B是同域的所以可以访问A的文档对象等。

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset='utf-8' />
        <title>B.html</title>
      </head>
      <body>
        <script type="text/javascript">
            window.onload = function() {
                var isSet = false
                var inteval = setInterval(function() {
                    var search = location.search.replace('?', '')
                    if (isSet) {
                        clearInterval(inteval)
                        return  
                    }
                    if (search) {
                        var height = search.split('=')[1]
                        var doc = parent.parent.document
                        var ifr = doc.getElementById('ifr')
                        ifr.style.height = height + 'px'
                        isSet = true
                    }
                }, 500)
            }
        </script>
      </body>
    </html>

    C.html

    嵌入在A中,和A不同域,要实现C的自适应,C多高则A里的iframe就设为多高。C里嵌入B.html

    <!doctype html>
    <html>
    <head>
        <title>C.html</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h3>这是一个很长的页面,我要做跨域iframe的高度自适应</h3>
        <ul>
            <li>页面 A:http://snandy.github.io/lib/iframe/A.html</li>
            <li>页面 B:http://snandy.github.io/lib/iframe/B.html</li>
            <li>页面 C:http://snandy.jd-app.com</li>
            <li>D.js:http://snandy.github.io/lib/iframe/D.js</li>
        </ul>
        <p>A</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><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p>
        <iframe id="myifr" style="display:none" src="http://localhost:9001/B.html"></iframe>
        
    <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
        }
        window.onload = function() {
            var doc = document
            var height = calcPageHeight(doc)
            var myifr = doc.getElementById('myifr')
            if (myifr) {
                myifr.src = 'http://localhost:9001/B.html?height=' + height
                // console.log(doc.documentElement.scrollHeight)     
            }
        };    
    </script>
    </body>
    </html>

      

     
  • 相关阅读:
    PS只能各个工具使用的注意知识点
    怎样利用自动化工具做真实的项目
    抖音视频、新浪微博、今日头条、拼多多砍价 、淘宝业务、快手、小红书、大众点评刷数据
    前端开源实战项目推荐
    提问的智慧
    论程序员为何加班—我的工作日常
    大白话入门 Spring Cloud
    Java 书单
    Spring Boot 经典开源项目推荐
    Flash 终将谢幕:微软将于年底( 2020 年 )停止对 Flash 的支持
  • 原文地址:https://www.cnblogs.com/liujinyu/p/5673120.html
Copyright © 2020-2023  润新知