iframe内のプレーンJavaScriptからEmberアクションを呼び出す

Question

私はemberアプリケーションに埋め込まれたiframeを持っています。 iframe内からコンポーネントのメソッドを呼び出すにはどうすればよいですか？

私は何とかwindow.parent経由でemberインスタンスを取得する必要があると思いますが、それを行う方法、特にemberアクションをトリガする方法はありますか？

Answer 1

あなたは2つの問題に直面します。

まず、フレームのコンテンツがアプリと同じドメインから読み込まれるまでは、完全に隔離されています。しかし、IFRAME内、このようなコードが実行されなければならないが、そのようなフレームと通信するための方法は、あるのでwindow.postMessage

：

window.parent.postMessage({action: 'sayHi'}, '*'); 

最初の引数が親ウィンドウに送信するデータである（私はそこだけで、アクションフィールドを置きますあなたが渡す必要がある他の情報を追加することができます）

2番目の問題はemberアクションを呼び出しています。アプリケーションルートのbeforeModelフック内にメッセージリスナーを定義することをお勧めします。このフックは、ユーザーがアプリケーションを読み込むときに一度実行されます。それはそれを正しい場所にします。

beforeModel() { 
    window.addEventListener("message", receiveMessage, false); 

    var that = this; 
    function receiveMessage(event) { 
    var origin = event.origin || event.originalEvent.origin; // For Chrome, the origin property is in the event.originalEvent object. 
    // Here you want to check origin, but in twiddle its null, try on ur machine... 
    var data = event.data; 
    if (data.action !== undefined) { 
     that.send(data.action); 
    } 
    } 
} 

このコードは、アプリケーションルートのアクションを呼び出します。それらの中であなたのアプリを操作します。このアプローチを示すtwiddleを作成しました。

（申し訳程度の悪いフォーマットされていない非常にクリーンなコード、それだけで少し遅）