iframeに追記はできますか？

質問

JavaScript iframeに追記はできますか？
タイトルのとおりです。

インラインフレームのページと
インラインフレーム内のページは
同じ場所にあって、ローカル環境です。

要は、１つのiframe内に２つのファイルを入れられるか？
・HTMLファイルを１つ追加する
・ＪＳファイルを１つ追加する

くわしい情報をご存じの方、ご教示お願い致します。

回答No.3

AsarKingChang · ベストアンサー

やりたいことを書いておいてくれたら、
こちらが、暇な時、コード書いてもいいですがね。
（どちらもローカルだってなら、PHPなども使う方が、効率は
　あがるのですが、JSだけでもできない事もない事も確かなので）
ただ、あんまりはメリットないですよ。
なのですが、全くないわけでも無くて。
APIのテストとかをしてる時は、
HTMLをリロードせずにAPIをたたいた結果だけを
IFRAMEで表示してみたい？って雰囲気が出ることがあります。
なのですが、IFRAMEって「それ自体がリロード」されてるので、
ここが嫌だな！ってとき、div overflow:scrollの疑似IFRAMEで
代用すると、便利なんです。
要するに元々のURIのHTMLをリロードせず
特定のウインドウ内（ウインドウ自体が捏造でDIVなので）
を書き換えながら実行したい！って用途では
それなりに、メリットが出ます。

でも！、今回みたいにどっちもローカルだってなら、
元々そのデータは全部そろっていたんじゃないの？
って考えると、今回のケースでは
メリットが薄くなるな～ってだけです。

なのですが！！！
そういう考え方！ってのを勉強しておくと
質問者さんの以後の開発においてスキルとしては
発揮するとは思います。

こちらではそこまでの気持ちでの作業なのかは
把握できないので、お任せしますが。
ゲーム開発などにおいてはかなりつかいます。
PostManやcURLのオリジナル解析などで。

お礼

＞やりたいことを書いておいてくれたら、
こちらが、暇な時、コード書いてもいいですがね。

たいへんありがたく存じます。
また、質問しましたら
お力添えのほどよろしくお願いいたします。

回答No.2

AsarKingChang

>その辺を、具体的に知りたいですね。

外部のHTMLを「ファイル」として元々のページで
JSで読み込みます！
それを
<div id="waa">
などとして、waa内のinnerHTMLに送り出す。
そしてCSSで、
#waa {
/* 必要に応じてサイズも記載(DIVの場合サイズが横MAXなので) */
overflow:scroll;
}
こうするだけで、このDIVはIFRAMEのように、
そこだけスクロールバーがでて、操作可能になります。
しかも、制御は大本のHTMLに書かれたJSが
制御してるので、処理が早く、軽いんです。

サンプルのサイト
https://www.tagindex.com/stylesheet/box/overflow.html

これ全部IFRAMEみたいに見えますが。
全部ただのDIVです。
で、JSでこのDIVに送り出すDOM要素だけを
書けば
結果＝動的なIFRAMEと同じ状態になるという事です。

お礼

具体的な方法を
ご教示頂きまして
どうもありがとうございました。

回答No.1

AsarKingChang

結論はできます。
>同じ場所にあって、ローカル環境です。
この場合は、CORSクロスオリジンが無視できるので、
iframe にIDを振って起き、そのIDから
DOMエレメントを操作してください。

ただ、
>要は、１つのiframe内に２つのファイルを入れられるか？
一つのフレームは一つのHTMLです。
単にそのHTMLがさらに構成物を取り込んだだけで、
最終的にはそれで一つですよ。

ただしDOMエレメントの操作で
JSの読み込みを行っても「読み込みません」
JSってページの表示段階で実行されるので、
表示時点で存在しなかったものは
実行されない問題があります。
なので、IFRAMEで表示するもの自体を
DOM構築すれば、実行されます。
＝つまり最初の段階で既にあるDOMにすればいい
これらをクリアすれば解決です。

ただ、IFRAME使わなくても、
div overflow:scroll 状態で、疑似IFRAMEにした方が、
効率いいと思うけどね。

お礼

早速のご返答ありがとうございます。

＞IFRAME使わなくても、
div overflow:scroll 状態で、疑似IFRAMEにした方が、
効率いいと思うけどね。

その辺を、具体的に知りたいですね。