モーダル表示したiframe先のページ内文字要素をクリックで呼び出し元のvalueにコピーする方法をご紹介します。
過去記事「Bootstrapを使って簡単にモーダル画面を表示する方法」のBootstrapを使ってiframeページをモーダル表示させ、iframe先のページ内文字要素をクリックで呼び出し元のvalueにコピーします。
以下の手順で、クリックした要素の値を呼び出し元の 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)を設定する必要があります。
モーダル表示したiframe先のページ内文字要素をクリックで呼び出し元のvalueにコピーするデモページ
モーダル表示したiframe先のページ内文字要素をクリックで呼び出し元のvalueにコピーするデモページ
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
※今回ChatGPTを使ってベース(6割程度)に作成した記事になります。