jquery - jQuery - iframe から親ページのイベントにバインド

Question

重複の可能性:
jQuery でこれを記述する方法 “window.parent.document.getElementById('parentPrice').innerHTML”?

デモンストレーション目的でブラウザに移植するアプリがあります。

基本的に、実際のアプリを収容する iframe を持つ親ページがあります。親ページには、デバイス コントロールをシミュレートするためのボタンがいくつかあります。

基本的に、これらの親ページ ボタンのクリックを iframe で実行されているアプリでキャプチャするには、何らかの方法が必要です。

親ページにグローバル関数を作成して、バインディングをセットアップしようとしました。たとえば、次のようになります。

// parent document
var bindLeftArrow = function (callback) {
    $("div#controls button#left-arrow").on("click", function () {
        callback();
    });
};

// app initialization within iframe
parent.bindLeftArrow(function () {
    console.log("Left arrow pressed!");
    // do stuff
});

「左矢印が押されました」がコンソールにダンプされないため、これは機能しませんでした。私ができると思っていた他のことは、次のようなものです。

// parent document
$("div#controls button#left-arrow").on("click", function () {
    $(document).trigger("LEFT_ARROW_PRESSED");
});

// app in iframe
$(<parent document selector>).bind("LEFT_ARROW_PRESSED", function () {
    console.log("Left arrow pressed!");
    // do stuff
});

「親ドキュメントセレクター」の代わりにセレクターとして何を置くかはわかりません。

どうすればこれを達成できるか教えてもらえますか?