71103


下記のサンプルのように、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]


CC BY-SA 4.0
2020-10-11T09:47:25.140
71101
2020-10-14T03:26:04.313
2020-10-11T11:31:49.327
3060
13493
question
javascript html html5
iframe要素クリック時に、JavaScriptのclickイベントのハンドラが呼ばれない


異なるオリジンに対する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>


CC BY-SA 4.0
2020-10-11T11:23:51.707
71103
2020-10-11T11:23:51.707
7997
71101
answer


表題の質問の解決方法は現状存在しないようでした。

不本意ではありますが、 iframe 内のイベントターゲットを邪魔しないように、 position: absolute; を指定したアクション用の要素を
iframe に被せて実装を行いました。

@himenon 様ご回答ありがとうございました。


CC BY-SA 4.0
2020-10-14T03:26:04.313
71184
2020-10-14T03:26:04.313
13493
71101
answer