2020年04月04日

iframeの中のコンテンツの要素やイベントを取得する方法

お世話になっております。SeekNextの佐藤です。
今回はiframe内の要素やイベントを取得する方法を解説していきます。

実際結構はまりました。最初に注意点ですが、別ドメインのiframeには適用できないみたいなのでその点はご了承下さい。ブラウザのセキュリティ上仕方ないみたいです。無理やりする方法もあるみたいですが、無理やりしても問題かと思うのでその場合は素直に違う方法を考えましょう!

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iframeのテスト</title>
  </head>
  <body>
    <h1>iframeの中のコンテンツの要素やイベントを取得する方法</h1>
    <iframe src="test.html" frameborder="0" id="iframe"></iframe>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script>
      $('#iframe').on('load', function () {
        var iframeContents = $(this).contents();
        var testBtn = iframeContents.find('#testBtn');
        testBtn.on('click', function (event) {
          console.log("クリック!");
        });
      });
    </script>

  </body>
</html>

test.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <h2>ここからはiframe</h2>
    <button type="button" id="testBtn">クリック</button>
  </body>
</html>

JS部分だけを取り出すと以下のようになります。

$('#iframe').on('load', function () {
  var iframeContents = $(this).contents();
  var testBtn = iframeContents.find('#testBtn');
  testBtn.on('click', function (event) {
    console.log("クリック!");
  });
});

iframeが読みこまれていない状態で処理が行われることを防ぐために、「$(‘#iframe’).on(‘load’,」の後に処理を書き出します。iframeのコンテンツ内の要素を取得し($(this).contents()の部分)、.findにて対象の要素を取り出します。その後の処理は普段と同様です。

次回は違うドメインでも取得する方法について書いていこうと思いますが、参考程度に見ていただければ幸いです。

iframe内の要素やイベント取得について困っている人がいたら是非参考にしてみてください!