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