iframe 父子互传消息

Posted 2021-01-22 holy-amy

https://blog.csdn.net/qq_38366657/article/details/81538145

 

 

// 父页面的js
<iframe id=‘TopHeader‘ src="XXX"></iframe>
$(window).scroll(function () {
                var scrollTop = $(window).scrollTop()
                console.log(scrollTop, ‘1111‘);
                if (scrollTop > 600) {
                    //  $("#TopHeader").attr(‘data-hh‘, ‘ok‘)
                    // 父向子发送消息
                    var message = scrollTop;// ‘Hello!  The time is: ‘ + (new Date().getTime()) + "父的滚动" + scrollTop;
                    // console.log(‘blog.local:  sending message:  ‘ + message);
                    //send the message and target URI
                    iframe.postMessage(message, domain);
                }
            }); 

            //弹出一个新窗口
            var domain = location.origin;
            var iframe = document.getElementById(‘TopHeader‘).contentWindow;

            //响应事件
            window.addEventListener(‘message‘, function (event) {
                //  if(event.origin !== ‘http://davidwalsh.name‘) return;
                console.log(‘index22222222222:  ‘ + event.data);
                // event.source.postMessage(‘holla back youngin!‘,event.origin);
            }, false);


// 子页面的js

//响应事件
    window.addEventListener(‘message‘, function (event) {
        //if(event.origin !== ‘http://localhost:11893‘) return;
        console.log(‘message lister6666666666:  ‘ + event.data, event);
        event.source.postMessage(‘holla back youngin!6666666666‘, event.origin);

        parent.$("#TopHeader").css("height", event.data+‘px‘);
    }, false);