document.createElement で作成したElementがちょっとだけ大きいのを解決したい

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
 "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
  <TITLE> two forums </TITLE>
  <SCRIPT type="text/javascript">

  // HTML要素を作るヘルパー関数
  var createTag = function( tagname, attrs ) {
    var elm = document.createElement( tagname );
    if ( attrs ) for ( var name in attrs ) {
      elm.setAttribute( name, attrs[name] );
    }
    return elm;
  }

  window.onload = function() {
    var frameset = createTag("FRAMESET", {
      name: "rfp",
//      rows: "50%,50%",
      rows: "45%,45%",
      border: "1"
    });
    var frame1 = createTag("FRAME", {
      name: "forum1",
      src: "http://192.168.5.24/aquarius/forum/forum1/wforum.pl" // CGI#1
    });

    var frame2 = createTag("FRAME", {
      name: "forum2",
      src: "http://192.168.5.24/aquarius/forum/forum2/wforum.pl" // CGI#2
    });

    // 未表示の要素にappendChild()すると、DocumentFragment / ShadowDOM 的な操作 
    frameset.appendChild( frame1 );
    frameset.appendChild( frame2 );

    // 表示中の要素（<BODY>）にappendChild()するとツリーに追加＆リフローが発生
    // もしかしたら、 html 要素を取得して appendChild() する必要があるかもしれません（追記
    document.body.appendChild( frameset );
  }
  </SCRIPT>
</HEAD>
<BODY></BODY>
</HTML>

と
document.createElement　で作って
elm.setAttribute　でセットして2つのframeを表示させる方法をご教授頂けたのですが
上記実装では　IE,Chromeともに表示する部分が少しだけ大きくて
スクロールバーが表示されてしまいます。

createElementやらsetAttributeやらでグーグルさんで調査したのですが
解決方法は見つかりませんでした。

どうしたらスクロールバーが表示され無いように実装出来るのか
何という語句でグーグルさんで調べれば良いかご存知な方はお教え頂けますようお願いいたします。

m.ts10806

2020/09/07 05:24

結局非推奨のframeを使い続けなければならない理由は何でしょうか。宣言もHTML4ですし。

ma2hiro

2020/09/07 05:28

m.ts10806さんコメントありがとうございます。勉強不足故失礼しました。これってhtml4なのですね……　frameは別に使い続けないので良いので iframeで実装方法を調べてみます。コメントありがとうございました。

m.ts10806

2020/09/07 05:33 編集

しっかり自身で書かれてますよ。 > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> で「HTML 4.01 」「/TR/html4/」と。

ma2hiro

2020/09/07 07:28

m.ts10806さんご指摘ありがとうございます。 http://www.htmq.com/html5/doctype.shtml には ``` HTML 4.01では、DOCTYPE宣言は以下のように記述していました。（HTML 4.01 Transitionalの場合） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML5では、以下のようなシンプルな記述となります。大文字と小文字は区別されません。 <!DOCTYPE html> ``` との事なので変更しました。他にiframeを利用するにはどのように変更するのか調査中です。以上ご連絡いたします。

m.ts10806

2020/09/07 07:30

質問するのでしたら、要件確定してからの方が良いです。今のところHTML4でframeの質問であることには変わりないですし。方針転換するのでしたらいったん質問取り下げ（削除依頼）して出直した方が良いでしょう。

ma2hiro

2020/09/08 05:20

m.ts10806さんコメントありがとうございます。仰る通り情報を整理して出直した方が良いですね…… 本当に申し訳ございませんでした。

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

回答2件

frameは非推奨なのは何度も指摘しましたよね？

HTML
1rows: "45%,*",

投稿2020/09/07 05:30

yambejp

総合スコア114829

yambejp

2020/09/07 05:32

かりにどうしてもframeが必要だとしても frameをjsで書き起こす必要はないと思います HTMLないに直にframesetを書いてください

ma2hiro

2020/09/07 05:49 編集

＞yambejpさん本当に申し訳無いです…… 私の理解が足りないのかと思うのですが下記のようにiframeにするとIEでは表示されないのです…… ``` //　　　　　　　　　　　　　↓ var frame1 = createTag("IFRAME", { name: "forum1", src: "http://192.168.5.24/aquarius/forum/forum1/wforum.pl" // CGI#1 }); ``` >HTMLないに直にframesetを書いてください ``` : </head> <BODY onLoad="getName()"> </body> </html> ``` をどのようにすると仰っているのか理解が足りないのです…… 本当に申し訳無いですが何という語句でグーグルさんで調べると理解が深まるのかお伺いいたします。ちなみに `` rows: "45%,*", `` ではIEだと表示されませんでした……

yambejp

2020/09/07 05:52

frameでわけるとき２分割の場合片方をスタティックに指定してもう片方は「*」するということです。すでにかいてありますがframeをjsで書くことが不要 iframeなら最初からiframeタグをbodyに埋め込んでください

ma2hiro

2020/09/07 07:59

yambejpさん大変申し訳無いです。その最初からiframeタグをbodyに埋め込む方法が分からないのです…… 一応下記のようかな？と思い実装してみたのですが上手く表示されません…… なんという語句でググると良いかヒントだけでもお教え頂けないでしょうか？ changeTagみたい命令が欲しいのですが見つからないのです…… ``` <!DOCTYPE html> <HTML> <HEAD> <TITLE> two forums </TITLE> <SCRIPT type="text/javascript"> window.onload = function() { //↓changeTagみたいなのがほしい…… var frame1 = createTag("FRAME", { name: "forum1", src: "http://192.168.5.24/aquarius/forum/forum1/wforum.pl" // CGI#1 }); //↓changeTagみたいなのがほしい…… var frame2 = createTag("FRAME", { name: "forum2", src: "http://192.168.5.24/aquarius/forum/forum2/wforum.pl" // CGI#2 }); // 未表示の要素にappendChild()すると、DocumentFragment / ShadowDOM 的な操作 // frameset.appendChild( frame1 ); // frameset.appendChild( frame2 ); // 表示中の要素（<BODY>）にappendChild()するとツリーに追加＆リフローが発生 // もしかしたら、 html 要素を取得して appendChild() する必要があるかもしれません（追記 // document.body.appendChild( frameset ); } </SCRIPT> </HEAD> <BODY> <iframe name="forum1"></frame> <iframe name="forum2"></frame> </BODY> </HTML> ```

yambejp

2020/09/07 08:02

<BODY> <iframe name="forum1" src="http://192.168.5.24/aquarius/forum/forum1/wforum.pl"></iframe> <iframe name="forum2" src="http://192.168.5.24/aquarius/forum/forum2/wforum.pl"></iframe> </BODY> じゃだめなんですか？

ma2hiro

2020/09/07 08:15

yambejpさんそれだと表示領域が小さいのでだめなのです…… 画面いっぱいに大きく取りたいのでどうするのか分からなくて色々質問して申し訳無いです……

yambejp

2020/09/07 08:26

iframeにwidth="45%"をそれぞれ記載すればよいのでは？ 50%を指定すると余白のカラミで二行にわかれちゃいそうですね

ma2hiro

2020/09/07 08:42

yambejpさん度々ありがとうございます。縦に2つ並べたいと思っております。 ``` <!DOCTYPE html> <HTML> <HEAD> <TITLE> two forums </TITLE> <SCRIPT type="text/javascript"> </SCRIPT> </HEAD> <BODY> <iframe name="forum1" width="100%" height="100%" src="http://192.168.5.24/aquarius/forum/forum1/wforum.pl"></iframe> <iframe name="forum2" width="100%" height="100%" src="http://192.168.5.24/aquarius/forum/forum2/wforum.pl"></iframe> </BODY> </HTML> ``` と実装するとページの上部に（固定幅？）こじんまりと表示されるのですが 2つでいっぱいに表示したいのですがどのような語句でグーグルさんで調べれば良いのかご助力頂けないでしょうか？本当に申し訳無いのですが上記お問い合わせいたします。

yambejp

2020/09/07 08:55

高さは好きなサイズ大きめに書いてみては？

ma2hiro

2020/09/08 01:42

yambejpさんコメントありがとうございます。 ``` <iframe name="forum2" width="100%" height="100%" src="http://192.168.5.24/forum.pl"></iframe> ``` 　　　　　　　　　　　　　　　　　　　　↑をheight="100px"　とすればその大きさで固定出来るのですがユーザーがウィンドウの高さを変更するので自由に変更出来る％で指定したいのです…… ググって出てきた http://www.tohoho-web.com/html/iframe.htm には ``` height=n LS/H5/H4T/e3/Ch/Fx/Sa/Op/N6 フレームの高さをピクセルまたはパーセンテージで指定します。 ``` とあるのにどうして height="50%" が効かないのか悩んでます……

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