JavaScriot

【jQuery】iFrame内と親ページで、相互に要素を操作する

#jQuery
written by おちの

みなさん、こんにちは!

エンジニアのおちのです。

今回は、iFrame内から親ページ、親ページからiFrame内、それぞれの要素操作方法について書いていきます。

仕様イメージ

親要素には「子要素変更」ボタン、子要素には「親要素変更」ボタンを表示しています。

「子要素変更」ボタンをクリックすると、子要素を変更します。

「親要素変更」ボタンをクリックすると、親要素を変更します。

HTML, CSS

では、ソースを見ていきます。
今回メインとなるのはJavaScriptソースとなりますので、HTMLとCSSはご参考までに。

HTML

main.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0"
    />
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      $(function () {
        $('#parentBtn').click(function () {
          $('#goatIframe').contents().find('#childTitle').text('child!!!!!');
          $('#goatIframe').contents().find('#childTitle').css('color', 'rgb(106, 153, 135)');
        })
      })
    </script>
    <title>goat</title>
  </head>

  <body>
    <div>
      <h2 id="parentTitle">parent</h2>
      <div id="parentText">
        <p>親テキスト1</p>
        <p>親テキスト2</p>
        <p>親テキスト3</p>
      </div>
      <div>
        <button id="parentBtn" class="button" type="input">子要素変更</button>
      </div>
      <iframe id="goatIframe" src="iframe.html"></iframe>
    </div>
  </body>
</html>

iframe.html

<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      $(function () {
        $('#childBtn').click(function () {
          $('#parentTitle',parent.document).css({color:'rgb(106, 153, 135)'});
          $('#parentText', parent.document).stop().animate({ opacity: '0' });
        })
      })
    </script>
  </head>
  <body>
    <h2 id="childTitle">child</h2>
    <button id="childBtn" class="button" type="input">親要素変更</button>
  </body>
</html>

CSS

style.css

* {
  padding: 0;
  margin: 0;
}


body {
  margin: 0;
  padding: 20px 50px;
  font-family: "游ゴシック", "Yu Gothic", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
  background-color: rgb(223, 218, 213);
  text-align: center;
}


#goatIframe {
  padding: 10px;
  width: 300px;
  height: 160px;
}


.base {
  max-width: 1500px;
  margin: 0 auto;
  padding-left: 3%;
  padding-right: 3%;
}


#parentBtn {
  margin: 20px 0;
  padding: 5px 15px;
  background-color: white;
  color: rgb(106, 153, 135);
  border-color: white;
  border-radius: 4px;
  font-size: 15px;
}


#childBtn {
  margin: 20px 0;
  padding: 5px 15px;
  background-color: rgb(106, 153, 135);
  color: white;
  border-color: rgb(106, 153, 135);
  border-radius: 4px;
  font-size: 15px;
}

JavaScript(jQuery)

では、Scriptの箇所を抜粋して見ていきます。

親ページからiFrame内の要素を操作する

子要素を取得するfind()メソッドを使用して操作ができます。

要素指定:$([要素]).contents().find([子要素])

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      $(function () {
        // 子要素変更ボタンをクリック
        $('#parentBtn').click(function () {
          // タイトルのテキスト変更
          $('#goatIframe').contents().find('#childTitle').text('child!!!!!');
          // タイトルのCSS変更
          $('#goatIframe').contents().find('#childTitle').css('color', 'rgb(106, 153, 135)');
        })
      })
    </script>

iFrame内から親ページの要素を操作する

指定要素(親要素)の引数に”parent.document”を指定することで操作できます。

要素指定:$([要素], parent.document)

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      $(function () {
        // 親要素変更ボタンをクリック
        $('#childBtn').click(function () {
          // タイトルのCSS変更
          $('#parentTitle',parent.document).css({color:'rgb(106, 153, 135)'});
          // テキスト部を非表示
          $('#parentText', parent.document).stop().animate({ opacity: '0' });
        })
      })
    </script>

 

備忘録

直接ローカルファイルをブラウザで表示した際は、下記エラーが発生し動作確認ができません。

Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.

確認は、ローカルでサーバーを立てて行ってみてください。
(当記事のソースは、VSCodeのプラグイン「Live Server」を使用して実行確認しました。)

以上となります。
最後まで読んでいただき、ありがとうございました!

【JavaScript関連】
【JavaScript】動的生成DOMのクリックイベント発火
【JavaScript基礎】JavaScriptの等価比較(==, ===)について