[解決済み] HTML5 - クロスブラウザー iframe postMessage - 子から親へ?
2023-08-14 10:59:11
質問
私はこのチュートリアルに沿って http://www.youtube.com/watch?v=R2hOvZ7bwXU では、postMessage を使って iframe と親の間で安全にメッセージを受け渡す方法が説明されています。 http://html5demos.com/postmessage2
私の問題は、私はそれが逆の方法(子から親へ)で動作する必要があり、親ウィンドウをターゲットにする方法を知らないということです。
これは私のレシーバーコードです(親に)。
function handleMsg(e) {
if(e.origin == "http://uc.dialogue.net") {
let blah = e.data;
alert(blah);
} else {
alert("error");
}
}
addEventListener("message", handleMsg, true);
で、これは単純なフォーム(子)がトリガーとなる送信関数です。
let text = document.querySelector('.srchInput').value;
window.parent.postMessage(text, "http://uc.dialogue.net");
親を別の方法でターゲットにしたほうがいいでしょうか?
乾杯 ポール
どのように解決するのですか?
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
// Listen to message from child window
eventer(messageEvent,function(e) {
var key = e.message ? "message" : "data";
var data = e[key];
//run function//
},false);
親ページに上記、子ページに下記で動作するようにしました~。
parent.postMessage("loadMyOrders","*"); // `*` on any domain
からコピーしたコード ここに .
関連
-
[解決済み] HTML5/Canvas/JavaScriptを使用してブラウザ内のスクリーンショットを撮影する
-
[解決済み] 親メソッドから子メソッドを呼び出す
-
[解決済み] ウェブページがiframe内に読み込まれているのか、それともブラウザのウィンドウに直接読み込まれているのかを識別するにはどうしたらよいですか?
-
[解決済み] 親ページからiframe内のJavaScriptコードを呼び出す
-
[解決済み] 親ディバイスの高さを指定せずに、子ディバイスの高さを100%にする方法は?
-
[解決済み] location.host vs location.hostnameとクロスブラウザの互換性?
-
[解決済み] iframeのアクションから親ウィンドウをリダイレクトする
-
[解決済み] AngularJS - ngRepeatフィルタリングされた結果の参照を取得する方法
-
[解決済み] Prototypeを使ってtextareaを自動サイズ調整するには?
-
[解決済み] なぜjavascriptのES6 Promisesはresolve後も実行を継続するのですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】iFrame 内の要素を取得する。
-
[解決済み] アサインの左側にJavascriptのオブジェクトブラケット表記({ ナビゲーション } =)があります。
-
[解決済み] React js 親コンポーネントから子コンポーネントの状態を変更する
-
[解決済み] JavaScriptでの大文字小文字を区別しない正規表現
-
[解決済み] Reactメモを使うべきではない場合とは?
-
[解決済み] $.ajax実行中にローディングイメージを表示する
-
[解決済み] JSHintの'+'前の改行不良の説明
-
[解決済み] jQueryを使用して、すべてのクリックイベントハンドラを削除するにはどうすればよいですか?
-
[解決済み] なぜjavascriptのES6 Promisesはresolve後も実行を継続するのですか?
-
[解決済み] Chrome拡張機能:popup.htmlを強制終了させる