JavaScriptでインラインフレームにデータを読み込み、手作業を省略する方法

2023/05/15 12:19

この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>

retorofan
お礼率86% (340/393)

JavaScript
回答数3
ありがとう数3

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

AsarKingChang
ベストアンサー率46% (3467/7474)

2023/05/15 18:21 回答No.3

>手順１エクスプローラーでTEXTAREAにDrag&Dropするこっちの方法なら行けそうな気がするので、夜（深夜）ちょいちょい、遊んでみるかな！ドラッグする位置ミスると、悲しい結果にはなるだろうが（笑） Ajaxはおそらくオリジンがないので、動かないと思う。ファイルリーダーは使いたいわ～（シンプルにはなるからね～）

質問者

お礼 2023/05/15 19:40

IFRAMEのデータを親ページに取り出して作表する。セキュリティ制限の関係で無理の模様です。あらためてDrag＆Dropの仕様を考えます。ご協力ありがとうございました。 m(_ _)m

質問者

補足 2023/05/15 18:56

IFRAMEを用いた作表処理は、諦めたほうが良さそうですね。別法として、 FileAPI（new FileReader）を使うことになりますが、 Drag&Dropのワンストロークで作表できる見込みがたちました。

その他の回答 (2)

AsarKingChang
ベストアンサー率46% (3467/7474)

2023/05/15 15:00 回答No.2

>子にあるファイルは書き換えできません。 >親からの操作のみ、可能です。この条件がまずい！子供から親へのPostは当然子供がJavaScriptを実行できないといけないのですよ。又は、子供をJSにして、FileReaderでテキストを読み込んだ物を親からPostで吸うか？どっちにしても、CORSがあるので、子供がスクリプト実行できない状態だと、親からの参照は、できないので、ここをどうしましょ？結局【子ページ１】child.tsv 【子ページ２】child.html このどっちも、オリジンを持たないので相互参照が出来ないんですわ。。どうしても、ファイルリーダー関数か、CORS無し環境が避けられない気がします。

質問者

お礼 2023/05/15 17:21

結構ハードルが高いでしょう？！そこで明暗を思いつきました。 IFRAMEを使わないことにして、次のステップで実現する。手順１エクスプローラーでTEXTAREAにDrag&Dropする手順２それで作表処理そうすれば、 1 Copy&Pasteをしなくてよい 2 ボタンを押す必要もないこんな方法でならいけると思いますがいかがでしょうか。

質問者

補足 2023/05/15 17:05

ここで以前の質問の件が関係してくる訳です。 iframeに追記はできますか？ 2023/05/13 17:03

AsarKingChang
ベストアンサー率46% (3467/7474)

2023/05/15 14:07 回答No.1

前回の親から子のPostを子から親も追加すればできそうな予感。親→子、子供が処理をして出来上がった表を子→親にPost でどうでしょ？結局コピペと同じ結果は得られると思う。どうしてもだめなら、またやりまっせ～

質問者

お礼 2023/05/15 14:31

ご回答ありがとうございます。今回のテーマは、私にとってハードルが高いです。ぜひともオチカラをお貸しください。どうぞよろしくお願いいたします。

質問者

補足 2023/05/15 14:27

子にあるファイルは書き換えできません。親からの操作のみ、可能です。

JavaScriptでインラインフレームにデータを読み込み、手作業を省略する方法

JavaScript 手作業から解放されたいのです