切換語言為:簡體

iframe嵌入子頁面, 根據子頁面高度自適應

  • 爱糖宝
  • 2024-09-23
  • 2052
  • 0
  • 0

最近有不少對接第三方的任務,主要是用過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>
<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>
<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切換)去寫

0則評論

您的電子郵件等資訊不會被公開,以下所有項目均必填

OK! You can skip this field.