HTMLのframesetタグでフレームを分割してHTMLを
表示させることができます。例えば...
<frameset rows="40%,60%">
<frame name="frm_01" target="f_left" src="left.htm">
<frame name="frm_02" target="f_right" src="right.htm">
</frameset>
と記述すると、ウィンドウ左にleft.htmを40%、ウィンドウ右にright.htmを
50%割合で表示します。これらを何かHTML上のボタンをクリックされる
などのイベントが生じた場合に、ウィンドウ分割してある比率を(例:left.htm40%→60%)の
ように変更したいのですが、そのようなことはできないものでしょうか?
No.2
- 回答日時:
サンプルですー。
参考にして、改造してつかってください。(^^)
以下のファイルを同じフォルダに作って(そのままソース張り付けてhtmlで保存してね)、frame.htmlをブラウザで開いて見てねー。
■frame.html■
<html>
<head><title></title>
<script language="javascript">
<!--
document.write(frset('40%','60%','a.htm?','1.htm?'))
function frset(a,b,f1,f2){
var frset=
'<title>frame</title>\n'
+'<frameset cols="'+a+','+b+'">\n'
+'<frame src="'+f1+'">\n'
+'<frame src="'+f2+'">\n'
+'</frameset>\n'
return frset
}
//-->
</script>
</head>
</html>
■a.html■
<html>
<head><title></title>
</head>
<body>
右のリンクで<br>フレームのサイズ<br>が変わるよ!
</body>
</html>
■1.html■
<html>
<head><title></title>
<script language="javascript">
<!--
function chsize(a,b){
if(location.search==""){
if(document.all){
parent.document.all.tags("frameset")[0].cols=a+","+b
}else{
//parent.document.open()
parent.document.write(frset(a,b,parent.frames[0].location.href+"?",parent.frames[1].location.href+"?"))
parent.document.close()
}
}
}
//-->
</script>
</head>
<body onload="chsize('40%','60%')">
こっち側60%です。
<br>
<a href="2.htm">こっち側を40%にする!</a>
</body>
</html>
■2.html■
<html>
<head><title></title>
<script language="javascript">
<!--
function chsize(a,b){
if(location.search==""){
if(document.all){
parent.document.all.tags("frameset")[0].cols=a+","+b
}else{
//parent.document.open()
parent.document.write(frset(a,b,parent.frames[0].location.href+"?",parent.frames[1].location.href+"?"))
parent.document.close()
}
}
}
//-->
</script>
</head>
<body onload="chsize('60%','40%')">
<a href="1.htm">こっち側を60%にする!</a>
<br>
こっち側40%です。
</body>
</html>
No.1ベストアンサー
- 回答日時:
parent.document.write('~
~
~
');
で、トップのファイルと全く同じで割合を変えたようなのを書くということになるのではないでしょうか。
但し、自動広告とか入っているとうまく行かないでしょうね~きっと。
------------------------------------
以下TOPファイル
------------------------------------
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
</head>
<frameset cols="80,*">
<frame src="right.html" name="right" noresize>
<frame src="left.html" name="left" noresize>
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>
------------------------------------
以下LEFTファイル
------------------------------------
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
</head>
<script language="javascript"><!--
function a(html1, html2) {
parent.document.write('<html><head><meta http-equiv="content-type" content="text/html;charset=shift_jis"></head><frameset cols="150,*"><frame src="'+html1+'" name="left" noresize><frame src="'+html2+'" name="right" noresize></frameset><noframes><body></body></noframes></html>');
}
//--></script>
<body>
<a href="javascript:a(top.left.location.href, top.right.location.href)">abc</a>
</body>
</html>
このあたりが動作的には究極的に一番速い(一瞬で切り替わる)
ので、いかにもフレーム境界位置が「瞬時に」変わると言う
感じになるはずなので、参考にしてやってみてください。
ただし、一方で、動作の安定性が欠けます。広告などがあっ
たり、ある一定以上、フレームページが大きいと挙動不審に
なるとおもいます。個人的にはオススメしないです。
一番安定するのは、CGIや、HTMLへの?つき引数として渡して
それをtarget="_top"で呼び出す方法ですが、スピード的に
「ガクッ」と極端に落ちるので、これらを使ってしまうと、
「フレームの境界位置が変わる」と言う感じにはならないで
しょうね。
ヽ(´ー`) マターリ♪
〇ヽ
Л
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript htmlとcssで分数を表示後、分数の右側に文書を書きたい 1 2022/04/28 10:09
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS htmltとcssのコードで 1 2022/11/26 13:37
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
submitボタンで他のフレームを...
-
スマホ上で、左右スワイプで次...
-
javascriptでurlタイトル変化。
-
フレームを使用した複数プルダ...
-
インラインフレームで表示され...
-
<a href="#" …>の意味を教えて...
-
ポップアップウィンドウの位置
-
JavaScriptでiframeの内容を「...
-
(Javascript)印刷するファイル...
-
確認ダイアログで「キャンセル...
-
ブラウザをJavaScriptで最小化…
-
ウィンドウ名の設定
-
SCRIPT5007: 未定義または NULL...
-
bodyタグって2重にしようするこ...
-
getElementsByNameで要素が取得...
-
画像ファイルのアドレスに今日...
-
function の return 値を表示し...
-
キーを押している間の時間を計...
-
window.openの件について
-
ユーザーが更新ボタンを押さな...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
スマホ上で、左右スワイプで次...
-
openerは使えないのでしょうか?
-
フレームでの右クリック禁止
-
親ウィンドウの別フレームを子...
-
ブラウザのURLアドレス文字表記...
-
フレームのことで
-
submitボタンで他のフレームを...
-
フレームを跨ぐドロップダウン...
-
別ページのインラインフレーム...
-
Safariで<iframe>のinnerHTMLを...
-
インラインフレームで表示され...
-
textarea入力された文字をjump...
-
子フレームの自動リロードは可...
-
右フレームのテキストに、値を...
-
フレーム分割領域のサイズを変...
-
ブラウザごとに違うとは思いま...
-
2つ親のフレームにアクセスしたい
-
showModalDialog()による新規ウ...
-
フレームを分けたときに共通で...
-
名前が定義されていないiFrame...
おすすめ情報
