ラボ > 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);
});
});
});