PostMessage - Поверхность от Iframe до родителя

У меня есть веб-сайт, содержащий iframe. Я хочу, чтобы отслеживать, какая кнопка пользователь нажимает внутри iframe и обрабатывать эту информацию в родительском окне. Я просмотрел HTML5 PostMessage, но не знаю, как я скажу iframe, где находится родитель (строка 3 в iframe.html). Обратите внимание, что родительский и iframe имеют один и тот же домен и протокол.PostMessage - Поверхность от Iframe до родителя

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 до родителя

ответ

Смежные вопросы