iframe 父子互传消息,父页面滚动,子页面触发父页面高度

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);

  

原文地址:https://www.cnblogs.com/holy-amy/p/10007482.html