iframe要素クリック時に、JavaScriptのclickイベントのハンドラが呼ばれない


下記のサンプルのように、Twitterの埋め込みツイートをクリックした際にJavaScriptの処理を実行したいのですが、クリックイベントに登録したハンドラが動作しません。

`addEventListener`の第三引数を`true`にして試してもみたのですが結果は同じでした。

実際の`iframe`内に読み込むページはTwitterの埋め込みウィジェットになるので、

  1. `iframe`内の`window`に対して`click`イベントを設定することができず、
  2. `iframe`内のDOM要素のクリックイベントが出来なくなるような実装では解決しません。

このような条件でイベントハンドラを動作させる方法や、イベントハンドラが動作しない理由についてお心当たりがございましたら是非ご教授いただきたいです。よろしくお願いします。

**サンプルコード:** \- [JSFiddle](https://jsfiddle.net/1vhomy4d/)

[code]

    <div id="container">
      <iframe src="https://www.example.com"></iframe>
    </div>
    
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    
    <script>
    const container = document.querySelector("#container");
    
    const clickHandler = (event) => {
      alert("clicked");
    }
    
    container.addEventListener("click", clickHandler, true);
    </script>
[/code]




異なるオリジンに対するAPIへのアクセスは[制限](https://developer.mozilla.org/ja/docs/Web/Security/Same-
origin_policy#Cross-
origin_script_API_access)されています。同一オリジンであれば、`iframe.contentWindow`などからイベントハンドラを登録することは可能でしょう。

<https://developer.mozilla.org/ja/docs/Web/Security/Same-origin_policy>




異なるオリジンに対するAPIへのアクセスは[制限](https://developer.mozilla.org/ja/docs/Web/Security/Same-
origin_policy#Cross-
origin_script_API_access)されています。同一オリジンであれば、`iframe.contentWindow`などからイベントハンドラを登録することは可能でしょう。

<https://developer.mozilla.org/ja/docs/Web/Security/Same-origin_policy>

