父页面的html部分:
<div>我是父页面</div>
<iframe src="./01.html" allowTransparency="true" scrolling="no" id="detail" frame width="100%" onLoad="onLoad()"></iframe>
父页面的js部分:
window.onLoad = () => {
var obj = $('#detail')[0].contentWindow; // contentWindow属性是指指定的frame或者iframe所在的window对象
obj.postMessage('我是父页面','*');//父页面传递消息给子页面
window.onmessage = function (e) {//父页面监听子页面传递过来的消息
var obj = e.data;
console.log('=***==',obj);
$('#detail').css('height', obj.height);//拿到子页面传递的消息后进行赋值
}
}
子页面的html部分:
<div class="box" id="box" style="width:41vw;height:41vw;background-color: pink;"></div>
子页面的js部分:
//获取iframe嵌套的子页面的高度
window.onmessage = function (e) {
var height = Number(document.body.getBoundingClientRect().height) + 80;
//这里的80可以根据情况调整我也不知道怎么回事,父页面会比子页面少80像素
var obj = {
height,
}
//将子页面的高度传递给父页面
top.postMessage(obj, '*')
}