web-dev-qa-db-ja.com

「DOMWindow」で「postMessage」を実行できませんでした：提供されたターゲットOriginは、受信者ウィンドウのOrigin（「null」）と一致しません

私はherokuにゲームを持っています。今はFacebookキャンバスで動作させようとしていますが、Firefoxでは動作しますが、Chrome and IEしません。

IEはボタン付きの警告を表示し、ボタンをクリックするとコンテンツを表示します。

クロムでは、このエラーが発生します：

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

どうしましたか？

javascriptfacebookheroku
23
Sascuash

自分（またはFacebook）がメッセージを投稿しているターゲットウィンドウの読み込みが完了していることを確認してください。私がこのエラーを受け取ったほとんどの時間は、私がメッセージを送信していたiframeがロードに失敗したときでした。

39
Gustaff

これが発生する可能性のある別の理由は、サンドボックス属性を持つiframeを使用していて、_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!", '*');を使用します
21
Jamie McCrindle

フレームがロードされたかどうかを確認するには、onload関数を使用します。または、メイン関数をロードする：jsでiframeを作成するときにロードを使用することをお勧めします

 $('<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
twiii_florence

私の場合、http://プレフィックスを追加しませんでした。潜在的にチェックする価値があります。

1
nikk wong

私の問題は、最初からプレーヤーを完全にインスタンス化していたが、ラッパーdivの代わりにiframeを使用したことでした。

0
Walter Kimaro

私の場合、SSL証明書はiframeドメインに対して無効でした。そのため、メッセージを送信しようとしているiframe URLが問題なく開いていることを確認してください（https経由でiframeをロードする場合）。

0
Artyom Pranovich