자식에서 부모 iframe으로 메시지 보내기

음 간단한 작업을하려고합니다. 상위 창에서 iframe으로, iframe에서 부모로 메시지 보내기자식에서 부모 iframe으로 메시지 보내기

하는 index.js (부모)

window.onload = function() { 
    //Get Audio node 
    let audio = document.getElementsByTagName('audio')[0]; 

    //Get iframe node 
    let iframe = document.getElementsByTagName('iframe')[0]; 

    iframe.contentWindow.postMessage('Parent To Child', '*'); 
    window.addEventListener('message', messagesHandler); 
} 

function messagesHandler(ev) { 
    console.log(ev.data); 
}

menu.js

window.onload = function() { 
    window.parent.postMessage('Child to parent', '*'); 
    window.addEventListener('message', messagesHandler); 
} 

function messagesHandler(ev) { 
    console.log(ev.data); 
}

나는 부모로부터 자식에게 메시지를 보낼 수 있지만, 다른 방법은 주위에이다. 모든 단서 ??

출처

2017-04-11 Goamaral

iframe로드 핸들러 다음에 부모로드 핸들러가 호출됩니다. 이렇게하면 자식 프레임에서 보낸 postMessage이 처리되지 않습니다. MDN docs에서

: 문서로드 프로세스의 끝에

로드 이벤트가 발생합니다. 이 시점에서 문서의 모든 개체가 DOM에 있고 이미지, 스크립트, 링크 및 하위 프레임로드가 완료되었습니다.

청취자가 이미 등록되어 있다고 확신 할 때 postMessage을 수행해야합니다. 부모로드 이벤트 전에 하위 수신기를 사용할 수 있다는 것을 알고는 있지만 일반적 순서로 구현하고이 순서에 의존하지 않는 것이 좋습니다. 따라서 동일한 프레임 워크 코드를 사용할 수 있습니다. 부모 또는 자식 프레임.

또 다른 권장 사항은 일부 상황에서 트리거하지 못할 수 있으므로 창로드 이벤트에서 작업하지 않는 것입니다. 더 나은 선택은 DOMContentLoaded입니다.

출처

2017-04-11 15:31:18

<!DOCTYPE html> 
<html> 
    <body> 
    <div id="test"></div> 

    <script> 
     window.onmessage = function(e){ 
      if (e.data == '001:hello') alert('Hello from iframe'); 
     }; 

     var insideIframe = function() { 
      window.onload = function() { 
       console.log('onLoad'); 
      }; 
      window.callPapa = function() { 
       window.top.postMessage('001:hello', '*'); 
      }; 
      window.onmessage = function(e) { 
       if (e.data == "hello") { 
        document.body.innerHTML += "<div>Hello from parent</div>" 
       } 
      }; 
     } 

     var fnToStr = insideIframe.toString().replace(/\s+/g, ' '); 
     var FnBody = fnToStr.substring(fnToStr.indexOf("{") + 1, fnToStr.lastIndexOf("}")); 

     // Test 
     var mediaData = '<html><body><div><button onclick="callPapa()">Click me</button></div>'; 
     mediaData += '<script>' + FnBody + '<\/script></body></html>'; 

     var iframe = document.createElement('iframe'); 
     iframe.setAttribute('marginwidth','0'); 
     iframe.setAttribute('marginheight','0'); 
     iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(mediaData); 

     // PASTE THE IFRAME INSIDE WHATEVER RANDOM DIV 
     document.body.appendChild(iframe); 
    </script> 

    </body> 
</html>

출처

2017-04-11 15:15:44 ayxos

자식에서 부모 iframe으로 메시지 보내기

답변

관련 문제