詳しい人求む！

WEBページのヘッダーフッターを非表示にした本文のみを表示させたい

締切済

質問者：hori29
質問日時：2021/09/30 14:28
回答数：1件

お世話になります。
いろいろなサイトを参考にして、現在flexItemを使用して、
左側にリンクメニューを並べて右側にそれぞれの押したリンク先の
ページを表示するものを作成しています。

表示しているのはガルーンのポータルサイトです。
メイン画面を左右に分割して、左のリンクを押したら
右に該当のリンク先のページが表示できるようにはなっていますが
右のフレームの中にも、メイン画面のヘッダー部分を含めたページ全体が
表示されています。
リンク先は、同じ掲示板の中の別々の記事で、ページの構成は同じです。

右のフレームには、本文の部分のみ表示させたいのですが、
そんなことは可能でしょうか？

どうぞよろしくお願いします。

gura_さん
早速、たくさんのコードで教えていただきありがとうございます。
こんな作り方があるのかと大変勉強になります！！

ただ今回は、右フレームに表示させたいページが既に１００件以上あり
今後も増えていく予定です。
社内グループウェアの掲示板で作成したページで、１つ１つのURLで
開くとヘッダー等を含んで表示されます。
リンクをクリックして、<a></a>で該当記事を右フレームに開くようにすると
当然ですがヘッダーを含めて全てが表示されてしまいます。
ページを開くときに、既存のページの本文だけにしぼって表示するような仕組みを
そもそも実現することは可能でしょうか？よろしくお願いします。

補足日時：2021/10/01 11:41
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： gura_
回答日時：2021/10/01 10:00

hori29 さん

　････右のフレームには、本文の部分のみ表示させたい･･･････

同じような構成の色々な本体ページを作って、
その中に共通のメニューページを呼び出すようにしたら如何ですか。

例↓

『iframe-s.html』メニューページ ----------------

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>iframe メニューページ</title>
</head>
<body>
【iframe メニュー】<br><br>
<a href="iframe-m1.html" target="_parent">iframe-m1</a><br>
<a href="iframe-m1.html#jump1" target="_parent">iframe-m1#jump1</a><br>
<a href="iframe-m1.html#jump2" target="_parent">iframe-m1#jump2</a><br><br>
<a href="iframe-m2.html" target="_parent">iframe-m2</a><br><br>
<a href="iframe-m3.html" target="_parent">iframe-m3</a><br><br>
</body></html>

『iframe-m1.html』本体１ページ ----------------

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
header{ text-align:center }
.wrap {
width:900px; 1height:90vh; margin:0 auto;
display: flex;
padding: 10px;
}
.left { width:200px; background-color: #ffd; }
.right { flex:1; padding:10px; background-color: #ddd; }
#jump1, #jump2 { margin: 500px 10px; display:block; }
</style>
</head>
<body>
<header>
<h1>ここはヘッダーです</h1>
</header>
<div class="wrap">
<iframe src="iframe-s.html" class="left">
ここに、メニューページを嵌める</iframe>
<div class="right">
<h2>本体　１</h2>
<h3>ここに、本体ページを表示</h3>
左の iframe からリンクするとき、左の iframe と同時にこのページを閉じ、<br>
同一の iframe を貼った別の本体ページを表示します。<br><br>
左の iframe のリンクで、target="_parent"とし本体ページごと閉じます。<br>
結果として、この部分のみ書き換えたように見えます。
<br><br>
<a id="jump1"></a>
ページ途中のリンク先1
<br><br>
<a id="jump2"></a>
ページ途中のリンク先2
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</body></html>

『iframe-m2.html』本体2ページ ----------------

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
header{ text-align:center }
.wrap {
width:900px; margin:0 auto;
display: flex;
padding: 10px;
}
.left { width:200px; background-color: #ffd; }
.right { flex:1; padding:10px; background-color: #ddd; }
#jump1, #jump2 { margin: 300px 10px; display:block; }
</style>
</head>
<body>
<header>
<h1>ここはヘッダーです</h1>
</header>
<div class="wrap">
<iframe src="iframe-s.html" class="left">
ここに、メニューページを嵌める</iframe>
<div class="right">
<h2>本体　２</h2>
<h3>ここに、本体ページを表示</h3>
左の iframe からリンクするとき、左の iframe と同時にこのページを閉じ、<br>
同一の iframe を貼った別の本体ページを表示します。<br><br>
左の iframe のリンクで、target="_parent"とし本体ページごと閉じます。<br>
結果として、この部分のみ書き換えたように見えます。
<br><br>
<a id="jump1"></a>
ページ途中のリンク先1
<br><br>
</div>
</div>
</body></html>