ラボ > Javascript関連:DOM関連、イベント関連

JS iframe内のクリックされた要素の取得(contentWindow)

作成日:2023-12-21, 更新日:2023-12-21

サンプル

  1. ページが読み込まれたら「iframeに読み込まれたら」というイベントをセット
  2. iframeで読み込まれたらクリックイベントセット
  3. クリックされた要素を取得し、ゴニョゴニョする
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);
    });
  });
});