Почему html5 postMessage не работает для меня? - PullRequest
Новая
       9

Почему html5 postMessage не работает для меня?

5 голосов
/ 17 мая 2011

Я использую несколько строк JavaScript для создания элемента iframe, а затем я хотел бы отправить ему сообщение, например так: 

function loadiframe (callback) {
    var body = document.getElementsByTagName('body')[0];
    var iframe = document.createElement('iframe');
    iframe.id = 'iframe';
    iframe.seamless = 'seamless';
    iframe.src = 'http://localhost:3000/iframe.html';
    body.appendChild(iframe);
    callback();
}

loadiframe(function() {
    cpframe = document.getElementById('iframe').contentWindow;
    cpframe.postMessage('please get this message','http://localhost:3000');
    console.log('posted');
})

А потом внутри http://localhost:3000/iframe.html (источник iframe) что-то вроде этого: 

<!DOCTYPE html>
<html>
<head>
<title>does not work</title>
<script>
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
  if (event.origin == "http://localhost:3000") {
    document.write(JSON.stringify(event));
    document.write(typeof event);
  }
}
</script>
</head>
<body>
</body>
</html>

Но ничего не происходит ... Я даже пытался не использовать проверку безопасности для происхождения, но даже так ничего не происходит ... Как будто он так и не получил сообщение ...

Я в какой-то асинхронной проблеме? Я пытался убедиться, что iframe был загружен до того, как postMessage ушел ...

EDIT1: кроме того, на консоли не отображаются ошибки ...

EDIT2: я пробовал это в Google Chrome 11 и Firefox 4

Заранее спасибо.

1 Ответ

4 голосов
/ 17 мая 2011

Есть две возможные проблемы:

  1. Вы звоните callback до загрузки дочернего кадра - попробуйте это в событии load или сделайте это в setTimeout
  2. Мне никогда не удавалось заставить postMessage работать с чем-либо, кроме '*' в качестве источника. Если я добавлю туда URL, я получу предупреждение системы безопасности: «Ошибка безопасности: содержимое в http://xxx/ может не загружать данные из http://yyy/",, кроме как только в консоли ошибок (Ctrl + Shift + J), которая В любом другом месте. Я подозреваю, что есть еще кое-что, что нужно, чтобы это работало, но я еще не выяснил, что.

Вот jsfiddle с немного измененной версией вашего кода, загружающей документ из моего домена, работает для меня в Firefox и Chrome.

...