Nice programing

HTML5-크로스 브라우저 Iframe postmessage-자녀에서 부모로?

nicepro 2020. 11. 30. 19:54
반응형

HTML5-크로스 브라우저 Iframe postmessage-자녀에서 부모로?


-이 튜토리얼 다음 봤는데 http://www.youtube.com/watch?v=R2hOvZ7bwXU , 기본적으로 안전하게 iframe이 부모 사이에 메시지를 전달하는 PostMessage를 사용하는 방법을 설명합니다 - 당신은 기본적으로이 같은 끝낼를 - http://html5demos.com/postmessage2

내 문제는 반대 방향으로 (자식에서 부모로) 작동해야하고 부모 창을 대상으로하는 방법을 모른다는 것입니다.

이것은 내 수신자 코드입니다 (부모)-

function handlingMsg(e)
{alert("works")
    if(e.origin == "http://uc.dialogue.net")
        {
                var blah = e.data;
                alert(blah);    
        }
        else{alert("error");}
}
addEventListener("message",handlingMsg, true);

그리고 이것은 간단한 양식 (하위)에 의해 트리거되는 발신자 기능입니다.

   var text=$('.srchInput').val();
   window.parent.postMessage(text, "http://uc.dialogue.net");   

부모를 다른 방식으로 타겟팅해야합니까?

건배 폴


var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child window
eventer(messageEvent,function(e) {
    var key = e.message ? "message" : "data";
    var data = e[key];
    //run function//
},false);

상위 페이지에서 위와 하위 페이지에서 다음 작업을 수행했습니다.    

parent.postMessage("loadMyOrders","*");  //  `*` on any domain         

여기 에서 코드를 복사했습니다 .


허용되는 답변의 현대적이고 단순화 된 버전 (간결성을 위해 레거시 ie8 지원을 중단 함) :

window.addEventListener('message',function(e) {
    var key = e.message ? 'message' : 'data';
    var data = e[key];
    //run function//
},false);

참조하십시오 :

참고 URL : https://stackoverflow.com/questions/8822907/html5-cross-browser-iframe-postmessage-child-to-parent

반응형