iframe嵌入子页面, 根据子页面高度自适应最近有不少对接第三方的任务,主要是用过iframe嵌入第三方页面, 作为主

最近有不少对接第三方的任务,主要是用过iframe嵌入第三方页面, 作为主应用(父应用), 在父应用有的就是提供一个具体的宽高尺寸让他们接入, 有的可能就是要根据子页面的高度, 来撑开父页面

1. 父应用提供具体的尺寸, 子页面写死固定的尺寸

这种一般是在父应用的首页, 当接入多个子应用的时候, 应该用固定的尺寸, 看起来比较统一美观, 所以子应用应该根据父应用具体尺寸来写

father.vue

<div cls="business-tabs-content">
  <iframe 
   :src="item.url"
   height="100%"
   width="100%"
   marginwidth="0"
   framespacing="0"
   marginheight="0"
   frameborder="0"
   allowtransparency="true"
   scrolling="no" /> 
 </div>

.business-tabs-content { 
  height: 545px; // 这里主要是写具体的高度 
}

上面这个比较简单, 就是告诉他们高度是多少就行了

2. 父亲页面根据子页面的高度自适应

这种一般是在父应用的详情页, 每个子页面想要展现的具体信息内容不一样, 所以主应用应该根据子应用高度自适应

html demo

father.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <div>
    <div style="height: 600px;background-color: red;">花花哈</div>
    <div style="height: 544px;background-color: yellow;border: 1px solid red; 
    box-sizing: border-box;"></div>
    <div style="height: 430px;background-color: red;border: 1px solid yellow;
    box-sizing: content-box;">花花哈</div>
   </div>
</head>
<body>
    <style>
        body {
            padding: 0px;   
            margin: 0px;
        }
    </style>
    <script>
        window.onload = function() {
            var iframeHeight = document.body.scrollHeight;
            window.parent.postMessage(iframeHeight, '*');
        };
    </script>
</body>
</html>

son.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <div id="iframeWrapper">
        <iframe src="http://127.0.0.1:9052/son/index.html" width="100%" 
        height="100%" frameborder="0"></iframe>
    </div>
    <style>
        #ifr, body {
            padding: 0px;
            margin: 0px;
        }
    </style>
</head>
<body>
    <script>
        window.onmessage = function(e) {
            console.log(e.data, 10000)
            var iframeHeight = parseInt(e.data, 10);
            document.getElementById('iframeWrapper').style.height = iframeHeight + 'px';
        };
    </script>
    
</body>
</html>

以上的代码, 通过vscode中open with live serve, 可以进行测试

vue项目

father.vue

<div id="systemContent" cls="system-content"> 
    <iframe id="ifm" :src="detailUrl" height="100%" width="100%"
        marginwidth="0" 
        framespacing="0"
        marginheight="0" 
        frameborder="0"
        allowtransparency="true" 
        @load="changeFrameHeight()"
      /> 
</div>

mounted() { 
  this.changeFrameHeight(); 
},

/** 
* 解决高度自适应问题 
* 1. 如果是同源, 直接父级页面可以解决 
* const ifm = document.getElementById('ifm'); 
* const iframeBody = ifm.contentDocument || ifm.contentWindow.document; 
* const iframeHeight = iframeBody.body.scrollHeight; 
* 2.如果不同源, 需要父子页面通过通信进行解决 
* window.onload = function() { 
*   var iframeHeight = document.body.scrollHeight;
*   window.parent.postMessage(iframeHeight, '*');
*  };
*/
changeFrameHeight() { window.onmessage = function(e) { 
   let iframeHeight = parseInt(e.data, 10);
   document.getElementById('systemContent').style.height = iframeHeight + 'px'; }; 
},

son.vue

mounted() { 
  var iframeHeight = document.body.scrollHeight; 
  window.parent.postMessage(iframeHeight, '*');
}

直接在mounted里面或者在需要加载当前页面的方法里面(例如tab切换)去写