iFrameのソース変更を検知！JavaScript、jQuery、その他で実現する方法

2024-05-26

iFrameのsrc変更イベント検出：JavaScript、jQuery、その他の方法

Webページに埋め込まれたiFrameのソースURLが変更されたときにイベントを検出する方法について説明します。

3つの主要な方法

onloadイベント: これは最も古い方法ですが、すべてのブラウザで動作します。ただし、iFrame内のコンテンツが完全に読み込まれた後にのみイベントがトリガーされるため、少し遅延が発生する可能性があります。

<iframe src="http://www.example.com" onload="alert('iFrameのソースが変更されました')"></iframe>

contentWindow.locationプロパティ: この方法は、iFrameが同じドメインにある場合にのみ機能します。

<iframe src="/test.html" id="myIframe"></iframe>

<script>
  const iframe = document.getElementById('myIframe');
  iframe.addEventListener('load', function() {
    console.log('iFrameのソースが変更されました:', iframe.contentWindow.location.href);
  });
</script>

jQuery: jQueryを使用すると、より簡潔で読みやすいコードでイベントを検出できます。

<iframe src="http://www.example.com" id="myIframe"></iframe>

<script>
  $(document).ready(function() {
    $('#myIframe').on('load', function() {
      console.log('iFrameのソースが変更されました:', $(this).attr('src'));
    });
  });
</script>

上記以外にも、MutationObserverやPostMessage APIを使用してiFrameのsrc変更イベントを検出する方法があります。これらの方法は、より高度なテクニックですが、より柔軟性と制御性を提供します。

注意事項

セキュリティ上の理由から、異なるドメインにあるiFrameのsrc変更イベントを検出することはできません。
一部の古いブラウザでは、これらの方法が正しく動作しない場合があります。

上記の方法を参考に、状況に合った方法でiFrameのsrc変更イベントを検出してください。

サンプルコード：JavaScript、jQuery、MutationObserver

onloadイベント

<!DOCTYPE html>
<html>
<head>
  <title>iFrame src変更イベント検出（onload）</title>
</head>
<body>
  <iframe src="http://www.example.com" id="myIframe" onload="alert('iFrameのソースが変更されました')"></iframe>

  <script>
    // さらに処理が必要な場合は、ここでスクリプトを追加できます
  </script>
</body>
</html>

contentWindow.locationプロパティ

<!DOCTYPE html>
<html>
<head>
  <title>iFrame src変更イベント検出（contentWindow.location）</title>
</head>
<body>
  <iframe src="/test.html" id="myIframe"></iframe>

  <script>
    const iframe = document.getElementById('myIframe');
    iframe.addEventListener('load', function() {
      console.log('iFrameのソースが変更されました:', iframe.contentWindow.location.href);
    });
  </script>
</body>
</html>

jQuery

<!DOCTYPE html>
<html>
<head>
  <title>iFrame src変更イベント検出（jQuery）</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <iframe src="http://www.example.com" id="myIframe"></iframe>

  <script>
    $(document).ready(function() {
      $('#myIframe').on('load', function() {
        console.log('iFrameのソースが変更されました:', $(this).attr('src'));
      });
    });
  </script>
</body>
</html>

MutationObserver

<!DOCTYPE html>
<html>
<head>
  <title>iFrame src変更イベント検出（MutationObserver）</title>
</head>
<body>
  <iframe src="http://www.example.com" id="myIframe"></iframe>

  <script>
    const observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
          console.log('iFrameのソースが変更されました:', mutation.target.src);
        }
      });
    });

    const iframe = document.getElementById('myIframe');
    observer.observe(iframe, {
      attributes: true,
      attributeFilter: ['src']
    });
  </script>
</body>
</html>

説明

上記のコードはすべて、iFrame要素にID "myIframe"を設定しています。
それぞれの方法で、iFrameのソースが変更されたときにコンソールにメッセージを出力します。
自分のニーズに合わせて、必要に応じてコードを修正してください。

補足

MutationObserver方法は、より新しいブラウザでのみ動作します。
PostMessage APIを使用して、異なるドメインにあるiFrameのsrc変更イベントを検出することもできますが、より複雑なコードになります。

iFrameのsrc変更イベント検出：その他の方法

EventListener

const iframe = document.getElementById('myIframe');
iframe.addEventListener('load', function() {
  console.log('iFrameのソースが変更されました:', iframe.src);
});

利点:

シンプルで分かりやすい
ほとんどのブラウザで動作する

iFrame内のコンテンツが完全に読み込まれた後にのみイベントがトリガーされるため、遅延が発生する可能性がある

MutationObserver (MutationSummary API)

const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
      console.log('iFrameのソースが変更されました:', mutation.target.src);
    }
  });
});

const iframe = document.getElementById('myIframe');
observer.observe(iframe, {
  attributes: true,
  attributeFilter: ['src']
});

onloadイベントよりも高速で反応性が高い
属性の変更を検出する汎用的な方法

MutationObserver APIは、onloadイベントよりも複雑で理解しにくい
古いブラウザではサポートされていない

PostMessage API

// 親ウィンドウ
const iframe = document.getElementById('myIframe');
iframe.addEventListener('message', function(event) {
  if (event.data === 'srcChanged') {
    console.log('iFrameのソースが変更されました:', iframe.src);
  }
});

// 子ウィンドウ (iFrame内)
window.addEventListener('message', function(event) {
  if (event.origin === 'https://www.example.com' && event.data === 'changeSrc') {
    parent.postMessage('srcChanged', '*');
  }
});

iframe.src = 'https://new.example.com';

異なるドメインにあるiFrameのsrc変更イベントを検出できる
双方向通信が可能で、iFrame間でデータをやり取りできる

PostMessage APIは複雑で、より多くのコードとセットアップが必要
セキュリティ上の懸念事項がある

WebSockets

// 親ウィンドウ
const ws = new WebSocket('ws://localhost:8080');
ws.onmessage = function(event) {
  if (event.data === 'srcChanged') {
    console.log('iFrameのソースが変更されました:', iframe.src);
  }
};

const iframe = document.getElementById('myIframe');

// 子ウィンドウ (iFrame内)
const ws = new WebSocket('ws://localhost:8080');
ws.onopen = function() {
  ws.send('changeSrc');
};

iframe.src = 'https://new.example.com';