js实现iframe跨域高度自适应(postMessage)(一次握手思想)

版权声明:本文为博主原创文章,未经博主允许不得转载。 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等避免精度丢失的方法参考

https://blog.csdn.net/qq_29777207/article/details/85252258

猜你喜欢

转载自blog.csdn.net/qq_29777207/article/details/87874670