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

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

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

Contents

呼び出し元のページで、iframe を作成します。iframe の id や src は適切な値に設定してください。
呼び出し元ページmodal表示箇所（全体）の記述
iframe のページ（iframe.html）で、クリックイベントを監視し、クリックされた要素の値を親ページにコピー
呼び出し元のページで、メッセージイベントを受け取り、value にコピーする処理を実装
モーダル表示したiframe先のページ内文字要素をクリックで呼び出し元のvalueにコピーするデモページ

呼び出し元のページで、iframe を作成します。iframe の id や src は適切な値に設定してください。

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

呼び出し元ページmodal表示箇所（全体）の記述

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>

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>

呼び出し元のページで、メッセージイベントを受け取り、value にコピーする処理を実装

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

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

上記のコードでは、クリックイベントが発生すると、クリックされた要素のテキストまたは値を親ページに送信します。親ページでは、メッセージイベントを受け取り、値を適切な要素（ここでは myInput という ID の要素）に設定します。

注意事項: クリックされた要素の値を親ページに送信するために、メッセージが iframe 間でやり取りされます。この方法は、同一オリジンポリシーに従っている場合にのみ動作します。つまり、iframe のソースが呼び出し元のページと同じドメイン、プロトコル、ポートである必要があります。異なるドメインの場合は、Cross-Origin Resource Sharing（CORS）を設定する必要があります。