Не удалось выполнить "postMessage" на "DOMWindow": предоставленный целевой источник не соответствует источнику окна получателя ("null")

У меня есть игра в heroku, теперь я пытаюсь заставить ее работать в Facebook canvas, но, пока она работает в Firefox, в Chrome и IE нет.

IE показывает предупреждение с помощью кнопки, при нажатии кнопки он показывает содержимое.

в Chrome, я получаю эту ошибку:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://game.herokuapp.com') does not match the recipient window's origin ('null').

Что случилось?

11
facebook heroku javascript

4 ответов

убедитесь, что загружено целевое окно, в котором вы/FB публикуете сообщение. Большую часть времени я получал эту ошибку, когда скрытый iframe, на который я отправлял сообщения, не загружался.

27

еще одна причина, по которой это может произойти, - если вы используете iframe, который имеет атрибут sandbox и allow-same-origin Не например:

// page.html
<iframe id="f" src="http://localhost:8000/iframe.html" sandbox="allow-scripts"></iframe>
<script type="text/javascript">
    var f = document.getElementById("f").contentWindow;
    // will throw exception
    f.postMessage("hello world!", 'http://localhost:8000');
</script>

// iframe.html
<script type="text/javascript">
    window.addEventListener("message", function(event) {
        console.log(event);
    }, false);
</script>

Я не нашел другого решения, кроме:

  • добавить allow-same-origin в песочницу (не хотел этого делать)
  • использовать f.postMessage("hello world!", '*');
11

чтобы проверить, загружен ли кадр, используйте функцию onload. Или поместите свою основную функцию в load: я рекомендую использовать load при создании iframe js

 $('<iframe />', {
   src: url,
   id:  'receiver',
   frameborder: 1,
   load:function(){
     //put your code here, so that those code can be make sure to be run after the frame loaded
   }
   }).appendTo('body');
2

в моем случае я не добавить http:// префикс. Потенциально стоит проверить.

1