IFRAMEの表示データをクリップボードにコピーし、
IFRAMEやTEXTAREAにペーストする

ﾚ IFRAMEの表示データをクリップボードへコピーし、IFRAMEにペーストする方法｜
ﾚ FRAMEの表示データをクリップボードへコピーし、TEXTAREAにペーストする方法

「IFRAME データ コピー」などでyahoo検索すると、いくつかのサイトでつぎのjavascriptコードを見つけることができます。
下のコードは、iframe(ifm1)からiframe(ifm2)へ、1ステップでコピー&ペーストするコードです。

 その１、DIVタグで囲まれたIFFRAMEをコピー＆ペーストするjavascriptコード
document.getElementById('div2-ifm').innerHTML = document.getElementById('div1-ifm').innerHTML;

 その２、直接IFFRAMEをコピー＆ペーストするjQueryコード
$('#ifm2').contents().find('body').html($('#ifm1').contents().find('body').html());

・その１、DIVタグで囲まれたIFFRAMEをコピー＆ペーストするjavascriptコードのデモ

このコードを使用すると、IFRAMEの内容を丸ごと完全コピー&ペーストできます。

・Iframe1(.html）
・Iframe2(.html)

    Iframe1からIframe2へ

・Iframe1(YouTube)
・Iframe2(YouTube)

    Iframe1からIframe2へ 
jQuery(function($){
     $('#button1').click(function(){
        document.getElementById('div2-ifm').innerHTML = document.getElementById('div1-ifm').innerHTML;  //DIV参照
     });
}); 

<div id="" style="display:inline-block;width:350px">
・Iframe1<br>
<div id="div1-ifm"><iframe id="ifm1-ifm" src="http://urbanqee.com/doga/35k-story01.html" width=350></iframe></div>
</div>

<div id="" style="display:inline-block;width:350px;margin-left:10px">
・Iframe2<br>
<div id="div2-ifm"></div>

</div>
<br>    <small>Iframe1からIframe2へ </small><button id="button1">COPY&PASTE</button>

・その２、直接IFFRAMEをコピー＆ペーストするjQueryコードのデモ

このコードを使用すると、IFRAMEに表示されているテキスト文字のみコピー&ペーストします。したがい、画像はコピーできません。

・Iframe1

・Iframe2


    Iframe1からIframe2へ 
jQuery(function($){
   $('#button2').click(function(){
     $('#ifm2').contents().find('body').html($('#ifm1').contents().find('body').html());
   });
}); 

<div style="display:inline-block;width:350px">
・Iframe1<br><iframe id="ifm1" src="iframe-data.txt" width=350></iframe><br>
</div>
<div style="display:inline-block;width:350px;margin-left:10px">
・Iframe2<br><iframe id="ifm2" width=350></iframe><br>
</div><br>
    <small>Iframe1からIframe2へ </small><button id="button1">COPY&PASTE</button>
<br>
  </div>

以下に、１ステップの「その２、直接IFFRAMEをコピー＆ペーストするjQueryコード」コピー&ペーストの動作を、コピーとペーストを分けて行う方法について説明します。
コピーとペーストを分けることにより、手動でペースト（貼り付け）が可能になります。
なお、iframeからのコピーは画像はコピーできません。

IFRAMEの表示データをクリップボードへコピーし、IFRAMEにペーストする方法

1ステップでコピー&ペーストするjQueryコード $('#ifm2').contents().find('body').html($('#ifm1').contents().find('body').html())
から、 IFRAMEの表示データをクリップボードへコピーし、IFRAMEにペーストする方法および手順について説明します。
なお、IFRAMEの表示データを直接クリップボードへコピーすることができません。
このため、IFRAMEの表示データをTEXTAREAへコピー＆ペーストし、そのTEXTAREAのデータをクリップボードへコピーします。

・IFRAMEの表示データをクリップボードへコピーし、IFRAMEにペーストするコード

1ステップでコピー&ペーストするjQueryコードから、IFRAMEの表示データを参照するコードは、
$('#iframe ID名').contents().find('body').html であることが読み取れます。
下に示すとおり、青字のコードがペースト側、赤字のコードはコピー側を参照しています。 

$('#ifm2').contents().find('body').html($('#ifm1').contents().find('body').html())

IFRAME表示データをクリップボードへコピーし、IFRAMEにペーストするHTMLおよびjavascriptコードはつぎのとおりです。

・HTML 
<!--Iframe1-->
<iframe id="ifm1" src="iframe-src-text.html"></iframe><br>
<!--Iframe2-->
<iframe id="ifm2"></iframe><br>
<!--Textarea（退避域）-->
<textarea id="textarea1" style="visibility:hidden"></textarea>

・javascript 
 let inifm = $('#ifm1').contents().find('body').html();             //iframe1からデータ取得（コピー）
 document.getElementById("textarea1").style.visibility ="visible";  //退避域のtextareaを表示する
 document.getElementById("textarea1").value = inifm;                //コピー内容をtextareaへ退避
 var copyText = document.querySelector('#textarea1');               //コピー内容のtextareaデータ取得 
 copyText.select();                                                 //取得コピー内容の選択 
 if(document.execCommand('copy')) {                                 //コピー内容をクリップボードへコピー
   //alert('クリップボードにコピーしました.');
  } else {
   //alert('Ctrl+Cを押してください.');
 }  
 document.getElementById("textarea1").style.visibility ="hidden"; //退避域のtextareaを非表示にする

 $('#ifm2').contents().find('body').html(inifm);                   //iframe2へデータ貼り付け（ペースト）***
  ※１：IFRAME表示データをクリップボードへコピーするコードは1行目～10行目の１０ステップ、IFRAMEにペーストするコードは13行目の１ステップ。   ※２：コピーデータの退避域をここで表示状態(2行目）にするのは、表示状態にしないと取得コピー内容の選択（5行目）ができないため。

・IFRAMEの表示データをクリップボードへコピーし、IFRAMEにペーストするコードのまとめ

上記の「IFRAMEの表示データをクリップボードへコピーし、IFRAMEにペーストするコード」をコピー（下赤字部分）して、
つぎの２つのサンプルHTMLを作成しました。

  1. IFRAMEの表示データをクリップボードへコピーし、IFRAMEにペーストするまとめサンプルHTML（コピーとペースト）
  2. IFRAMEの表示データをクリップボードへコピーするまとめサンプルHTML（ペーストはCtrl+Vで行う）（コピーのみ）

このまとめサンプルHTMLおよびまとめサンプルデモを下に示します。 

<!DOCTYPE HTML>
<html lang="ja">
<head>
<title>IFRAMEからIFRAMEへコピー＆ペーストサンプル</title> 
<!-- jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

</head>
<body>
<h2>IFRAMEの表示データをクリップボードへコピし、IFRAMEにペーストするHTMLサンプルデモ</h2>
<DIV>
<div style="display:inline-block">
<p>・Iframe1</p>
<iframe id="ifm1" src="iframe-src-text.html"></iframe>
</div>
<div style="display:inline-block;margin-left:20px">
<p>・Iframe2</p>
<iframe id="ifm2"></iframe>
</div>
</DIV>
<p style="margin-left:260px">
<button>COPY&PASTE</button><br>
</p>
<p>・コピー内容確認域</p>
<textarea id="texsta" name="kanso" cols="40" rows="4">
ここに貼り付けて確認してください！</textarea>

<br><br>
・Textarea（コピー内容退避域は非表示）<br>
<textarea id="textarea1" style="visibility:hidden"></textarea>
<hr>
@urbanqee.com 2021.3.29
<script>
$(function(){
   $('button').click(function(){
     let inifm = $('#ifm1').contents().find('body').html();              //iframe1からデータ取得（コピー）***
     //alert(inifm);
      document.getElementById("textarea1").style.visibility ="visible";  //退避のtextareaを表示する
      document.getElementById("textarea1").value = inifm;                //コピー内容をtextareaへ退避
      var copyText = document.querySelector('#textarea1');               //コピー内容のtextareaデータ取得 
      copyText.select();                                                 //取得コピー内容の選択 
      if(document.execCommand('copy')) {                                 //コピー内容をクリップボードへコピー
        alert('クリップボードにコピーしました.');
      } else {
        alert('Ctrl+Cを押してください.');
      }  
      document.getElementById("textarea1").style.visibility ="hidden";  //退避のtextareaを非表示にする
 
      $('#ifm2').contents().find('body').html(inifm);                   //iframe2へデータ貼り付け（ペースト）***
   });

});
</script>

</body>
</html>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<title>IFRAMEの表示データをクリップボードへコピーするサンプル</title> 
<!-- jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

</head>
<body>
<h3>IFRAMEの表示データをクリップボードへコピーするHTMLサンプルデモ</h3>
<DIV>
<div style="display:inline-block">
<p>・Iframe1</p>
<iframe id="ifm1" src="iframe-src-text.html"></iframe>
</div>
<div style="display:inline-block;margin-left:20px">
<p>・Iframe2（未使用、ペーストなし）</p>
<iframe id="ifm2"></iframe>
</div>
</DIV>
<p style="margin-left:100px">
<button>COPY</button><br>
</p>
<p>・コピー内容確認域</p>
<textarea id="texsta" name="kanso" cols="40" rows="4">
ここに貼り付けて確認して下さい！</textarea>

<br><br>
・Textarea（コピー内容退避域は非表示）<br>
<textarea id="textarea1" style="visibility:hidden"></textarea>
<hr>
@urbanqee.com 2021.3.29 <a href="../iframe-clipboard-copypaste-top.html" target="_blank" title="このページのTOPへ">TOPへ</a>
<script>
$(function(){
   $('button').click(function(){
     let inifm = $('#ifm1').contents().find('body').html();              //iframe1からデータ取得（コピー）***
     //alert(inifm);
      document.getElementById("textarea1").style.visibility ="visible";  //退避のtextareaを表示する
      document.getElementById("textarea1").value = inifm;                //コピー内容をtextareaへ退避
      var copyText = document.querySelector('#textarea1');               //コピー内容のtextareaデータ取得 
      copyText.select();                                                 //取得コピー内容の選択 
      if(document.execCommand('copy')) {                                 //コピー内容をクリップボードへコピー
        alert('クリップボードにコピーしました.');
      } else {
        alert('Ctrl+Cを押してください.');
      }  
      document.getElementById("textarea1").style.visibility ="hidden";  //退避のtextareaを非表示にする
 
      //$('#ifm2').contents().find('body').html(inifm);                 //iframe2へデータ貼り付け（ペースト）***
   });

});
</script>

</body>
</html>

IFRAMEの表示データをクリップボードへコピーし、TEXTAREAにペーストする方法

上記その２、直接IFFRAMEをコピー＆ペーストするjQueryコードから、IFRAMEの表示データをクリップボードへコピーし、IFRAMEにペーストするサンプルHTMLについて つぎのとおりまとめました。

  1. IFRAMEの表示データが htmlファイル（.html）デモ≫
  2. IFRAMEの表示データが テキストファイル(.txt)で内容はHTMLソースコードデモ≫
  3. IFRAMEの表示データが テキストファイル(.txt)で内容は文字のみデモ≫ 

<!DOCTYPE HTML>
<html>
<head>
<title>IFRAME（HTMLページ）の表示データをクリップボードへコピーし、TEXTAREAにペーストする</title>
<!-- jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

</head>
<body>
<h3>IFRAME（HTMLページ）の表示データをクリップボードへコピーし、TEXTAREAにペーストするデモ</h3>
<p>・IFRAME - COPY</p>
<iframe id="ifm1" src="http://urbanqee.com/doga/35k-story01.html" title="対象データfrom"></iframe><br>
<p>・TEXTAREA - PASTE</p>
<textarea id="textarea1" name="kanso" cols="40" rows="10"  title="対象データto"></textarea>
<p><small>IFRAMEからTEXTAREAへ</small>  <button>COPY&PASTE</button></p>
<hr>
(c)urbanqee.com 2021.3.2
<script>
jQuery(function($){
    $('button').click(function(){
      //$('#ifm2').contents().find('body').html($('#ifm1').contents().find('body').html());
      //iframeの値を取得
      var inifm = $('#ifm1').contents().find('body').html(); 
      alert(inifm);
      //値をtextareaへ設定
      document.getElementById("textarea1").value = inifm; 
      var copyText = document.querySelector('#textarea1'); 
      copyText.select(); 
      if(document.execCommand('copy')) {
        alert('クリップボードにコピーしました.');
      } else {
        alert('Ctrl+Cを押してください.');
      }     
 
    });
});
</script>

</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>IFRAME（HTMLソースコード）の表示データをクリップボードへコピーし、TEXTAREAにペーストする</title>
<!-- jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

</head>
<body>
<h3>IFRAME（HTMLソースコード）の表示データをクリップボードへコピーし、TEXTAREAにペーストするデモ</h3>
<p>・IFRAME - COPY</p>
<iframe id="ifm1" src="iframe-src-htmlcode.txt" title="対象データfrom"></iframe><br>
<p>・TEXTAREA - PASTE</p>
<textarea id="textarea1" name="kanso" cols="40" rows="10"  title="対象データto"></textarea>
<p><small>IFRAMEからTEXTAREAへ</small>  <button>COPY&PASTE</button></p>
<hr>
(c)urbanqee.com 2021.3.2
<script>
jQuery(function($){
    $('button').click(function(){
      //$('#ifm2').contents().find('body').html($('#ifm1').contents().find('body').html());
      //iframeの値を取得
      var inifm = $('#ifm1').contents().find('body').html(); 
      alert(inifm);
      //値をtextareaへ設定
      document.getElementById("textarea1").value = inifm; 
      var copyText = document.querySelector('#textarea1'); 
      copyText.select(); 
      if(document.execCommand('copy')) {
        alert('クリップボードにコピーしました.');
      } else {
        alert('Ctrl+Cを押してください.');
      }     
 
    });
});
</script>

</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>IFRAME（文字のみ）の表示データをクリップボードへコピーし、TEXTAREAにペーストする</title>
<!-- jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

</head>
<body>
<h3>IFRAME（文字のみ）の表示データをクリップボードへコピーし、TEXTAREAにペーストするデモ</h3>
<p>・IFRAME - COPY</p>
<iframe id="ifm1" src="iframe-src-text.html" title="対象データfrom"></iframe><br>
<p>・TEXTAREA - PASTE</p>
<textarea id="textarea1" name="kanso" cols="40" rows="10"  title="対象データto"></textarea>
<p><small>IFRAMEからTEXTAREA</small>へ  <button>COPY&PASTE</button></p>
<hr>
(c)urbanqee.com 2021.3.2
<script>
jQuery(function($){
    $('button').click(function(){
      //iframeの値を取得
      var inifm = $('#ifm1').contents().find('body').html(); 
      alert(inifm);
      //値をtextareaへ設定
      document.getElementById("textarea1").value = inifm; 
      var copyText = document.querySelector('#textarea1'); 
      copyText.select(); 
      if(document.execCommand('copy')) {
        alert('クリップボードにコピーしました.');
      } else {
        alert('Ctrl+Cを押してください.');
      }     
 
    });
});
</script>

</body>
</html>

IFRAMEの表示データをクリップボードへコピーし、IFRAMEにペーストする方法｜IFRAMEの表示データをクリップボードへコピーし、TEXTAREAにペーストする方法 ｜TOP




 最終更新日：2021. 3.21（初版）