最近有不少对接第三方的任务,主要是用过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切换)去写
