ラボ > Javascript関連:DOM関連、イベント関連
JS iframe内のクリックされた要素の取得(contentWindow)
作成日:2023-12-21, 更新日:2023-12-21
サンプル
- ページが読み込まれたら「iframeに読み込まれたら」というイベントをセット
- iframeで読み込まれたらクリックイベントセット
- クリックされた要素を取得し、ゴニョゴニョする
window.addEventListener('DOMContentLoaded', () => { // ページの読込み完了時にイベントセット const elm_iframe = document.querySelector('iframe'); // // ▼iframeを最初から読み込ませる場合 // elm_iframe.contentWindow.document.addEventListener('click', (e) => { // const elm_this = e.target; // クリックされた要素 // alert("タグ: " + elm_this.tagName + "、id=" + elm_this.id + "、class=" + elm_this.className); // }); // ▼iframeを後から読み込ませる場合 elm_iframe.addEventListener('load', () => { // iframeに読込み完了時にイベントセット elm_iframe.contentWindow.document.addEventListener('click', (e) => { // クリックイベントセット const elm_this = e.target; // クリックされた要素 alert("タグ: " + elm_this.tagName + "、id=" + elm_this.id + "、class=" + elm_this.className); }); }); });