動的に追加されたiframeにおいて、その中の動的に追加された要素にイベントを登録したい

Question

◆説明
①動的に追加されるiframe
↑に関してですが、こちらはページ読み込み時に発火され追加されます。
※外部サービスを使用しています。

　②その中の動的に追加された要素
①で追加された要素(iframeを内包する要素)をクリックすると今回イベントを登録したい
要素が追加されます。

　・順番
1.ページ読み込み -- iframeを内包する要素が動的追加（※$(window).on(load)でも要素が確認できませんでした）
↓
2.1で追加されて要素をクリック -- イベントを登録をしたい要素が動的追加

◆試した見たこと
色々調査し、下記のような記述でも試してみたのですがうまくいきませんでした。　

$(document).on('click', '***', function(){
alert( 'click' );
});

よろしくお願いいたします。

Comments

[int32_t]

イベントを登録したい要素を追加するコードでイベントハンドラを登録できないのですか?

[Ryu__ta]

回答ありがとうございます。
>イベントを登録をしたい要素が動的追加
こちらに関して、説明が不足しておりました。
動的追加のイベントも外部サービス側で行っているので、登録ができないのです。

[int32_t]

なるほど。親のURLとiframeのURLは同一オリジン(同プロトコル、同ホスト、同ポート)ですか?

[Ryu__ta]

>親のURLとiframeのURLは同一オリジン(同プロトコル、同ホスト、同ポート)ですか?
外部サービス側で呼ばれてものなので、同一ではありません。

Answer 1

※外部サービスを使用しています。

クロスオリジン（ドメインなどが異なる）の場合、iframeの外部から内側のDOMに対して操作できることはありません。

Comments

[Ryu__ta]

回答ありがとうございます！
"iframe クロオリジン"等で検索すると、操作が不可能である記載が見つけられました。
また、postmessageを使うと可能との記載もありましたが、こちらに関しては知見ありますでしょうか？

[maisumakun]

> postmessageを使うと可能との記載もありましたが

可能ではあるのですが、内側・外側の両方に対応したJavaScriptコードが必要です。

外部サービスでコードを書き換える選択肢がない場合には使えません。

[Ryu__ta]

>可能ではあるのですが、内側・外側の両方に対応したJavaScriptコードが必要です。
>外部サービスでコードを書き換える選択肢がない場合には使えません。

なるほど。。
ご説明ありがとうございます！
※ベストアンサーにさせていただきました。