読者です 読者をやめる 読者になる 読者になる

フロントエンドエンジニアになりたい

デザイナーなのかコーダーなのかディレクターなのかよくわからない人のブログ。趣味で絵を描きました(過去形)

iframe要素でclickなどのイベントが発火しない

iframeを含め以下の要素はマウスイベントとタッチイベントをサポートしていません。

<base> <bdo> <br> <head> <html> <iframe> <meta> <param> <script> <style> <title>

解決策としては、iframe要素のcontentDocumentプロパティからframe内の要素にアクセスできるので、以下のようにiframe内部にイベントを設定して対応します。

<iframe id="iframe" src="/" width="500" height="500"></iframe>
var iframeBody = document.getElementById('iframe').contentDocument.body;
iframeBody.onclick = function(){alert('clicked')}

デモ