※ ChatGPTを利用し、要約された質問です（原文：JavaScript 手作業から解放されたいのです）
JavaScriptでインラインフレームにデータを読み込み、手作業を省略する方法
このQ&Aのポイント
JavaScriptを使用して、インラインフレームにデータを読み込んで作表する方法を解説します。
現在は手作業でテキストエリアにコピー＆ペーストして作表していますが、この手作業を省略する方法を知りたいです。
具体的なコード例や手順を教えていただけると助かります。
JavaScript 手作業から解放されたいのです
今、インラインフレームにデータを読み込んで作表するサンプルを作成中です。
インラインフレームには select() メソッドが使えないために
手作業でテキストエリアに copy&pasteしている状態です。
この手作業から解放されたいのですが、どういうコードでできますか？
スキルある方のお力添えをお待ちしております。
【親ページ】parent.html
<body>
<div>parent.html 親ページです.</div>
<style>
body {
background: lavender;
}
.wrap {
list-style-type: none;
display: flex;
width: 640px;
padding: 1.5em;
background: lightgreen;
border-radius: 10px;
}
form > div {
margin-top: 1em; font-weight: bold;
}
label {
display: block;
}
pre b {
color: red;
}
#iframe3 {
width: 300px;
height: 160px;
background: #eee;
}
#textArea {
margin-left: 10px;
width: 300px;
height: 160px;
}
</style>
<pre>
【テーマ】子ページ内のデータで作表する
＜条件＞
・子ページの情報で親ページに作表する
・ローカル環境（当然 Ajax(XMLHttpRequest)は対象外、new FileReader不使用）
・ファイルは、親子とも同じ場所
・現在は、<b>読込ファイル選択 ▶ IFRAMEをCTRL+C ▶ TEXTAREAでCTRL+V ▶ 作表ボタン押下 ▶ 作表</b>
理想は、手作業を省略して、<b>読込ファイル選択 ▶ 作表</b>
</pre>
<ul class="wrap">
<li>(1)［IFRAME］（理想は非表示に）
<iframe id="iframe3" src="./20230515-child.tsv" title="子ページ">
</iframe>
</li>
<li> (2)［TEXTAREA］（理想は非表示に）
<textarea id="textArea" placeholder="貼付場所"></textarea>
</li>
</ul>
<form name="form1">
<div>読込データファイルの選択</div>
<label><input name="cbox" type="radio" value="0" checked>
１.TSVファイル (タブ区切り .tsv)</label>
<label><input name="cbox" type="radio" value="1">
２.HTMLファイル</label>
</form>
<p>
<button id="button1">作表</button>
<table id="listTable"></table>
</p>
<script>
(function () {
//エレメント
const iframe = document.getElementById('iframe3');
const table = document.getElementById('listTable');
const textArea = document.getElementById('textArea');
const button1 = document.getElementById('button1');
//読み込みファイルの選択
document.form1.onchange = function(event) {
let n = event.target.value;
iframe.src = "./child." + ["tsv","html"][n];
}
//作表処理
button1.onclick = function (){
// 値を全選択してコピー (※使用不可能)
// iframe.select();
// var result = document.execCommand("copy");
//-------------------------------------------------------------
// 整形 文字データの配列化 作表
// (略)
//-------------------------------------------------------------
};
})();
</script>
</body>
【子ページ１】child.tsv
番号 名称 半径 衛星個数
1 水星 2,439 0
2 金星 6,051 0
3 地球 6,378 1
4 火星 3,396 2
5 木星 71,492 95
6 土星 60,268 104
7 天王星 25,559 27
8 海王星 24,764 14
9 冥王星 1,188 5
【子ページ２】child.html
<pre>
番号 名称 半径 衛星個数
1 水星 2,439 0
2 金星 6,051 0
3 地球 6,378 1
4 火星 3,396 2
5 木星 71,492 95
6 土星 60,268 104
7 天王星 25,559 27
8 海王星 24,764 14
9 冥王星 1,188 5
</pre>
お礼
IFRAMEのデータを親ページに取り出して作表する。 セキュリティ制限の関係で無理の模様です。 あらためてDrag＆Dropの仕様を考えます。 ご協力ありがとうございました。 m(_ _)m
補足
IFRAMEを用いた作表処理は、 諦めたほうが良さそうですね。 別法として、 FileAPI（new FileReader）を使うことになりますが、 Drag&Dropのワンストロークで作表できる 見込みがたちました。