2013-01-30 2 views
0

하나의 도메인에서 다른 도메인으로 PostMessage를 만들었습니다.html5 PostMessage 교차 도메인 - 반대 버전

도메인 A 도메인 B의 프레임이 있습니다. A에서 B로 메시지를 보낼 수 있습니다. 이제 반대의 작업을하고 싶습니다. 프레임에 팝업 창이있는 버튼이 필요합니다. 내가 거기에 클릭하면, 나는 도메인 A에 A.

에 B에서 메시지를 보낼 필요가 :

 <iframe id="frameId" src="http://b.net/2.html" onload="sendCommand();"> </iframe> 

      <script type="text/javascript"> 
         function sendCommand() { 
         var receiver; 
         receiver = document.getElementById('frameId').contentWindow; 
         receiver.postMessage(receiver, 'http://b.net'); 
         } 
       </script> 
     </body> 
    </html> 

그리고 도메인 B에 가 :

<!DOCTYPE HTML> 
    <html> 
    <head> 
    <script> 
    var F= function(){} 
    </script> 

    </head> 
    <body> 
    Hello THere 
    <button onclick="F()">Click me</button> 
    <script> 
      window.addEventListener('message', function(event) { 
      alert(event.origin); 
    }, false); 

    </script> 
    </body> 

</html> 

답변

0

나는이 함께 해결 :

이 좋은 해결책입니까?

<!DOCTYPE HTML> 
    <html> 
    <head> 
    <script> 
     var t; 
     function load(){  
       window.addEventListener('message', function(event) { 
         console.log(event.data) ;     
         window.clearInterval(t); 
         return; 
       }, false); 
     }  
    </script> 
    </head> 
    <body onload="load()"> 
      <iframe id="frameId" src="http://b.net/2.html" onload="sendCommand();"> No Frame!</iframe> 
      <script type="text/javascript"> 
        function sendCommand() { 
         // post massage to domain B 
         var receiver = document.getElementById('frameId').contentWindow; 
         receiver.postMessage("Start listening", 'http://b.net'); 
        } 
      </script> 
    </body> 
</html> 


<!DOCTYPE HTML> 
<html> 
<head> 
<script> 
var F= function(){ 
    // Send message from Iframe Page to domain A 
    parent.postMessage("From Iframe Page ","*"); 
} 
</script> 
</head> 
<body> 
Hello There 
<button onclick="F()">Click me</button> 
<script> 
     // Listen events 
     window.addEventListener('message', function(event) { 
     console.log(event.data) 
     }, false); 

</script> 
</body> 
</html>