document.writeが推奨されないので代替で実装したつもりだが表示されない

お世話になっております。

(https://teratail.com/questions/288852)[https://teratail.com/questions/288852]
にて解決したのですが
いざ実装してみると表示されないので
質問させて下さい。

html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>sample</title>
  <style>
    button {
      width: 50px;
      height: 50px;
    }
  </style>
<script language="javascript">
<!--
function getName(){
		const moi2 = document.createElement('div');
		moi2.innerHTML = '<frameset rows="50%,50%" border="1" name="rfp"><frame src="http://192.168.5.24/aquarius/forum/forum1/wforum.pl?" name="forum1"><frame src="http://192.168.5.24/aquarius/forum/forum2/wforum.pl?"></frameset>';
		document.body.appendChild(moi2);

//		これを↑に移植したつもり
//		document.write('<frameset rows="50%,50%" border="1" name="rfp"><frame src="http://192.168.5.24/aquarius/forum/forum1/wforum.pl?" name="forum1"><frame src="http://192.168.5.24/aquarius/forum/forum2/wforum.pl?"></frameset>');	

}

//-->
</script>

</head>

<BODY onLoad="getName()">
  <div id="div1">aaa</div>
  <div id="div2">aaa</div>
</body>
</html>

こちらで

<frameset rows="50%,50%" border="1" name="rfp"><frame src="http://192.168.5.24/aquarius/forum/forum1/wforum.pl?" name="forum1"><frame src="http://192.168.5.24/aquarius/forum/forum2/wforum.pl?"></frameset> が表示されないのはどうしてかどのように調査すれば良いのかご助力頂けないでしょうか？

お忙しいところ大変申し訳無いのですが上記お問い合わせいたします。

m.ts10806

2020/09/03 04:24

なぜもっと簡単なタグで試さないのでしょうか。あと「表示されない」はどこにどういう結果を期待したものですか？

行動規範の内容に同意します

回答5件

ベストアンサー

div要素に、子要素としてframesetは入れることができないからです。
現状では、bodyの直下に、空のdivが追加されているはずです。
framesetはbodyの替わりに使用するものです。

というか、前回質問から何度も多数の回答者から話が出てますが、
frameはWeb標準から削除されている要素のため、使うのは止めましょう。
たとえ、挙動に不都合があったとしても、今後改善されるなどは一切ありません。
別の代替要素だったりで実装するべきです。

投稿2020/09/03 04:33

編集2020/09/03 05:04

miyabi_pudding

総合スコア9528

ma2hiro

2020/09/03 04:47 編集

ありがとうございます。＞現状では、bodyの直下に、空のdivが追加されているはずです。なのですね…… 仰る通り助言を頂いていたのに何度も注意させて本当に申し訳ございません。 frameがだめだからiframeで実装しようとして失礼しました。 divなどで実装しようとしてみます。

miyabi_pudding

2020/09/03 04:49

デベロッパーツールで、Elmentタブ画面には、JavaScript実行後の動的なHTMLが出ているので、そちらも見ながらやってみるといいかと。

行動規範の内容に同意します

なんどもしつこいようですが、frame自体が非推奨です

投稿2020/09/03 04:21

編集2020/09/03 04:22

yambejp

総合スコア114784

ma2hiro

2020/09/03 04:41

大変失礼しました。そのように助言頂いていたのに失念しておりました。代替手段を調査します。

行動規範の内容に同意します

表示されないのはどうしてか

<!DOCTYPE html>はHTML5の**DOCTYPE宣言文（DTD）**です。
過去のご質問＆回答でも言及されている通り、レガシーな書き方 に従う必要があります。

モダンブラウザでフレームを使う場合、**DOCTYPE宣言文（DTD）**は仕様に合わせます。

HTML 4.01 の例（XHTMLの例は割愛します）

フレーム（分割を担う）ページのDTD（Frameset）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
 "http://www.w3.org/TR/html4/frameset.dtd">

各フレーム内に表示するページのDTD（Trasitional）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

まずは、スタティックなHTMLファイル３つで考えます。

index.html ... フレームを分けるページ / DTD は Frameset
menu.html  ... フレーム内に表示するページ(メニュー部) / DTD は Trasitional
main.html  ... フレーム内に表示するページ(コンテンツ部) / DTD は Trasitional

試していないのですが、Framesetの動的出力を JavaScript で行うには、こんな感じでしょうか。

html
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
2 "http://www.w3.org/TR/html4/frameset.dtd">
3<HTML>
4<HEAD>
5  <TITLE> two forums </TITLE>
6  <SCRIPT type="text/javascript">
7
8  // HTML要素を作るヘルパー関数
9  var createTag = function( tagname, attrs ) {
10    var elm = document.createElement( tagname );
11    if ( attrs ) for ( var name in attrs ) {
12      elm.setAttribute( name, attrs[name] );
13    }
14    return elm;
15  }
16
17  window.onload = function() {
18    var frameset = createTag("FRAMESET", {
19      name: "rfp",
20      rows: "50%,50%",
21      border: "1"
22    });
23    var frame1 = createTag("FRAME", {
24      name: "forum1",
25      src: "http://192.168.5.24/aquarius/forum/forum1/wforum.pl" // CGI#1
26    });
27
28    var frame2 = createTag("FRAME", {
29      name: "forum2",
30      src: "http://192.168.5.24/aquarius/forum/forum2/wforum.pl" // CGI#2
31    });
32
33    // 未表示の要素にappendChild()すると、DocumentFragment / ShadowDOM 的な操作 
34    frameset.appendChild( frame1 );
35    frameset.appendChild( frame2 );
36
37    // 表示中の要素（<BODY>）にappendChild()するとツリーに追加＆リフローが発生
38    // もしかしたら、 html 要素を取得して appendChild() する必要があるかもしれません（追記
39    document.body.appendChild( frameset );
40  }
41  </SCRIPT>
42</HEAD>
43<BODY></BODY>
44</HTML>

※タグ名は小文字で良いのですが、レガシーであることを強調するため大文字で記述しています

正しいDTDを記述した上で、
DOM のAPI(createElement(), setAttribute(), appendChild())を使う.

投稿2020/09/03 05:57

編集2020/09/03 06:00

AkitoshiManabe

総合スコア5432

ma2hiro

2020/09/03 06:12

AkitoshiManabeさんコメントありがとうございます。 <!DOCTYPE html> とおまじないとして表記してしまっていたのですがそちらの方も留意するとの事ありがとうございます。

AkitoshiManabe

2020/09/03 06:19

試していないコードを回答しましたが、JavaScriptだとコードが長くなりますので素直にHTMLで書くほうがよいと感じました。ただ、他の回答者様が声を揃えているように iframe でなんとかする方法も模索してください。

ma2hiro

2020/09/04 08:13

AkitoshiManabeさん誠にありがとうございました。正直試していないコードでなんとかなるのですが iframeでの実装も調査してみます。（出来ればどのような語句でググって見るのが良いのかが不明です…… 　iframe　だけだとそれっぽい文言にHITしなかったため）

AkitoshiManabe

2020/09/04 08:34 編集

iframe については NovisHub さんの回答にある HTML を参考に DOM操作してください。本回答の createTag() を使うと appendChild() でツリーを生成できるはずです（追記

行動規範の内容に同意します

<frameset>は<body>の代わりに用いるものなので、<body>の子要素としてDOMに追加しても描画されないようです。

The frameset element acts as the body element in documents that use frames.

HTML Standard

既にyambejpさんの回答にあるように、そもそも非推奨の要素なので、以下のように<iframe>に置き換えるのが妥当かと思います。

html
1<div style="display: flex;" name="rfp">
2  <iframe src="http://192.168.5.24/aquarius/forum/forum1/wforum.pl?" name="forum1"></iframe>
3  <iframe src="http://192.168.5.24/aquarius/forum/forum2/wforum.pl?"></iframe>
4</div>

投稿2020/09/03 04:57

退会済みユーザー

総合スコア0

miyabi_pudding

2020/09/03 05:02

あ、なるほど・・・。だから使用例が、</head>の次から書かれてたんですね・・・。もう使わなくなったから、全然わからなかったです　汗

退会済みユーザー

2020/09/03 05:14

私も調べるまで分かりませんでした。挙動としては面白いですが今後永遠に使用することはないので明日には忘れたいと思っています。

ma2hiro

2020/09/03 05:15

ありがとうございます！！！たいぶ実装方法が近づいてきました。今現在50%に出来るように調査中ですが本当にありがとうございました！！！

退会済みユーザー

2020/09/03 05:23

flexが使えると50%/50%も含めて柔軟にレイアウトできるようになるので、[css flex]あたりで検索すると良いと思います。

ma2hiro

2020/09/03 05:56

NovisHubさん　css flexあたりで検索しても高さ50%と見つけられませんでした…… ``` const moi2 = document.createElement('body'); moi2.innerHTML = '<div style="display: flex;flex-direction: column;" name="rfp"> <iframe style="height:50%;" src="http://192.168.5.24/aquarius/forum/forum1/wforum.pl?" name="forum1"></iframe> <iframe src="http://192.168.5.24/aquarius/forum/forum2/wforum.pl?"></iframe></div>'; document.body.appendChild(moi2); ``` と <iframe style="height:50%;" src="http://192.168.5.24/aquarius/forum/forum1/wforum.pl?" name="forum1"></iframe> と指定しても駄目でしたし <div style="display: flex;flex-direction: column;height:50%;" name="rfp"> と指定しても駄目だったのでどちらで50%と指定するのか伺ってよろしいでしょうか？本当に申し訳ないですが上記お問い合わせいたします。

miyabi_pudding

2020/09/03 06:03

横槍失礼します。それは本質問からだいぶ内容が変わるので、別質問立てましょう。

退会済みユーザー

2020/09/03 10:39

ma2hiroさん miyabi_takatsukさんのご指摘通り、本スレッドのトピック（document.writeが推奨されないので代替で実装したつもりだが表示されない）からずれますので、別質問を作成してください。別質問作成後にURL貼ってもらえたら見に行きますので。 miyabi_takatsukさんご指摘ありがとうございます。

行動規範の内容に同意します

https://www.tagindex.com/html5/embed/iframe.html

HTML5における変更点
要素の定義が微妙に変わりました。（インラインフレーム → 入れ子にされたブラウジング・コンテキスト）
要素内容の意味が変わりました。（代替コンテンツ → 無意味なテキスト）
srcdoc属性、sandbox属性が追加されました。
longdesc属性、scrolling属性、frameborder属性、marginwidth属性、marginheight属性、align属性が廃止されました。
width属性とheight属性の値にパーセントの数値を指定できなくなりました。

記載のように
width属性とheight属性の値にパーセントの数値を指定できなくなりました。
＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾
という事はcssで指定するしか無いのかな……
やってみます！

投稿2020/09/03 04:52

ma2hiro

総合スコア157