PostMessage - 從Iframe到Parent的表面

我有一個包含iframe的網站。我想跟蹤用戶在iframe內點擊哪個按鈕，並將該信息顯示給父窗口。我查看了HTML5 PostMessage，但我不確定如何告訴iframe父母的位置（iframe.html中的第3行）。請注意，父級和iframe具有相同的域和協議。PostMessage - 從Iframe到Parent的表面

Iframe.html的

<script type="text/javascript"> 
    var domain = window.location.protocol + '//' + window.location.hostname; 
    var parent = document.getElementById('parent').contentWindow; //what to do? 

    $('div').click(function() { 
     var message = $(this).text(); 
     parent.postMessage(message,domain); 
    }); 
</script> 

<div id="a">A</div> 
<div id="b">B</div> 
<div id="c">C</div>

parent.html

<script type="text/javascript"> 
    window.addEventListener('message', function(event) { 
     if(event.origin !== window.location.protocol + '//' + window.location.hostname;) { 
      return; 
     } 
     $('.message').html(event.data); 
    },false); 
</script> 

<div> 
    You have clicked on <span class="message"></span> 
</div> 
<iframe src="/iframe.html"></iframe>

來源

2014-01-07 Jon

我不知道該怎麼做jQuery的，但是，這裏是間通信的本機方法JavaScript中的父母和孩子框架。

的關鍵碼的存在：

var div = top.document.getElementById("topDiv");

top哪裏是父幀。

Parent.html

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Parent</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width"> 
     <script> 
     function message() { 
      var child = document.getElementById("childFrame"), 
        div = child.contentWindow.document.getElementById("childDiv"); 
      div.innerHTML = "TEXT"; 
     } 
     function main() { 
      document.getElementById("messenger").addEventListener("click", function() { 
       message(); 
      }); 
     } 
     window.onload = main; 
     </script> 
    </head> 
    <body> 
     <iframe id="childFrame" src="child.html"></iframe> 
     <button id="messenger">Click Me</button> 
     <div id="topDiv"></div> 
    </body> 
</html>

Child.html

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Child</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width"> 
     <script> 
     function message() { 
      var div = top.document.getElementById("topDiv"); 
      div.innerHTML = "TEXT"; 
     } 
     function main() { 
      document.getElementById("messenger").addEventListener("click", function() { 
       message(); 
      }); 
     } 
     window.onload = main; 
     </script> 
    </head> 
    <body> 
     <div id="childDiv"></div> 
     <button id="messenger">Click Me</button> 
    </body> 
</html>

來源

2014-01-07 22:31:58 zero298

PostMessage - 從Iframe到Parent的表面

回答

相關問題