版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_29777207/article/details/87874670
1、html页面
<div>
<iframe id="frame_child" name="frame_child" frameborder="no" width="100%" height="100%" style="min-height:1000px" scrolling="yes" src=""></iframe>
</div>
2、父页面js代码
<script type="text/javascript">
window.onload = function(){
//端口号是你自己的端口号
var url= "http://子页面IP:8092/share.html" + "&_t=" + (new Date()).getTime();
$("#frame_child").attr("src",url);
$("#frame_child").load(function(){
setTimeout(function(){
var frame = document.getElementById("frame_child").contentWindow;
var message = {parentOrigin:window.origin,msg:"收到请回复"};
frame.postMessage(JSON.stringify(message), 'http://子页面IP:8092');
console.log('发送成功');
},2000);
window.addEventListener("message", receiveMessage, false);
});
}
var receiveMessage = function(event) {
if (event.origin !== 'http://子页面IP:8092'){
return;
}
console.log("子页面有消息回来了");
console.log(event);
$("#frame_child").attr("height",accAdd(accMul(event.data,1),300) + 'px');
window.removeEventListener("message", receiveMessage, false);
}
</script>
2、子页面js代码
<script type="text/javascript">
$(function(){
window.addEventListener('message', function (event) {
const data = JSON.parse(event.data)
if (event.origin !== data.parentOrigin) {
return
}
// console.log('父发送了:' + data.msg)
// console.log('我返回页面高度:' + document.body.scrollHeight)
event.source.postMessage(document.body.scrollHeight, event.origin)
}, false);
});
</script>
accAdd , accMul等避免精度丢失的方法参考