JavaScript

iframe先のページ内文字要素をクリックで呼び出し元のvalueにコピーする方法

  /

Web開発の中で、モーダルウィンドウを使った動的なデータ操作はよく見られるシナリオです。
本記事では、モーダル内のiframeを活用し、クリックされた要素のデータを親ページにコピーする方法を、初心者にも分かりやすく解説します。

過去記事「Bootstrapを使って簡単にモーダル画面を表示する方法」のBootstrapを使ってiframeページをモーダル表示させ、iframe先のページ内文字要素をクリックで呼び出し元のvalueにコピーします。

以下の手順で、クリックした要素の値を呼び出し元の value にコピーする方法を説明します。

Contents

ステップ1: 親ページでのiframeの作成

まずは親ページにiframeを追加します。以下のコードを参考にしてください。

<iframe id="myIframe" src="iframe.html" width="100%" height="200"></iframe>

このiframeタグのsrc属性には、別ページのURLを指定します。このページは後ほど作成します。

ステップ2: モーダルウィンドウの構築

次に、Bootstrapを使ってiframeをモーダルウィンドウ内に表示します。
bootstrap.min.css、bootstrap.bundle.min.jsファイルを読み込み、Bootstrapを使ってiframeページをモーダル表示させてます。
以下のコード例を親ページに追加してください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>モーダル表示したiframe先のページ内文字要素をクリックで呼び出し元のvalueにコピーするデモページ</title>
<meta name="description" content="モーダル表示したiframe先のページ内文字要素をクリックで呼び出し元のvalueにコピーするデモページ">
<?php require_once $_SERVER['DOCUMENT_ROOT'] . '/demo/inc/head.php'; ?>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </head>
  <body>
<h1 class="text-center pt-5">モーダル表示したiframe先のページ内の文字要素をクリックすると、<br>以下のテキストボックスにコピーされます。</h1>

<div class="text-center pt-5">
  <input type="text" id="myInput" value="" class="text-center" style="width:300px;">
</div>

<div class="text-center pt-5">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  モーダル画面を表示
</button>
</div>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">モーダル画面</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
<iframe id="myIframe" src="iframe.html" width="100%" height="200"></iframe>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  window.addEventListener('message', function(event) {
    var value = event.data;

    // value を呼び出し元の要素に設定
    document.getElementById('myInput').value = value;
  });

</script>

</body>
</html>

ステップ3: iframe内でのクリックイベントの実装

iframeページ（iframe.html）では、クリックされた要素の値を親ページに送信する処理を実装します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>呼出し先のiframeページ - モーダル表示したiframe先のページ内文字要素をクリックで呼び出し元のvalueにコピー</title>
<meta name="description" content="呼出し先のiframeページ - モーダル表示したiframe先のページ内文字要素をクリックで呼び出し元のvalueにコピー">
<style>
html, body {
  margin: 0;
  text-align: center;
  font-size: 16px;
}
h1{
  font-size: 16px;
  padding: 0 0 20px 0;
  margin: 0;
}
.copy{
  width: 50%;
  margin: 15px auto;
}
</style>
</head>
<body>
<h1>以下のdivまたはinputタグの文字をクリックすると、呼出し元ページにコピーします。</h1>


<div class="copy">divタグ内の文字をコピー</div>

<input type="text" class="copy" value="inputタグのvalue文字をコピー" />


<script type="text/javascript">
var copy = document.getElementsByClassName("copy");
var copys = Array.from(copy);

copys.forEach(function(target) {
    target.addEventListener('click', function(event) {
      var targetElement = event.target;
      var valueToCopy = targetElement.textContent || targetElement.value;

      parent.postMessage(valueToCopy, '*');
    });

});
</script>

</body>
</html>

このコードにより、iframe内の指定した要素をクリックすると、その値が親ページに送信されます。

ステップ4: 親ページでのメッセージ受信処理

最後に、iframeから送信されたデータを親ページで受け取り、指定したフォーム要素に値をコピーします。

<script type="text/javascript">
  window.addEventListener('message', function(event) {
    var value = event.data;

    // value を呼び出し元の要素に設定
    document.getElementById('myInput').value = value;
  });
</script>

このコードでは、iframeから送信されたデータを受信し、myInputというIDを持つ要素の値に設定します。

ステップ5: 実装上の注意点

  • iframeのsrcは同じドメイン内である必要があります。同一オリジンポリシーに注意してください。
  • 異なるドメインの場合、CORS（Cross-Origin Resource Sharing）の設定が必要です。
  • セキュリティ上、iframe間のメッセージには信頼できるデータのみを扱うべきです。

モーダル表示したiframe先のページ内文字要素をクリックで呼び出し元のvalueにコピーするデモページ

以下のリンクから、実際に動作するデモページを確認できます。
モーダル表示したiframe先のページ内文字要素をクリックで呼び出し元のvalueにコピーするデモページ

まとめ

本記事では、モーダル内のiframeを使ったデータコピーの実装方法を解説しました。この手法を応用すれば、フォームの動的入力やインタラクティブなUI構築が可能です。ぜひ試してみてください！

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

iframe addEventListener 文字コピー postMessage ChatGPT記事
関連記事