【最大10000ポイント】当たる!!質問投稿キャンペーン!

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%)の
ように変更したいのですが、そのようなことはできないものでしょうか?

このQ&Aに関連する最新のQ&A

A 回答 (2件)

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"で呼び出す方法ですが、スピード的に
「ガクッ」と極端に落ちるので、これらを使ってしまうと、
「フレームの境界位置が変わる」と言う感じにはならないで
しょうね。

ヽ(´ー`) マターリ♪
   〇ヽ
   Л
    • good
    • 0

サンプルですー。


参考にして、改造してつかってください。(^^)
以下のファイルを同じフォルダに作って(そのままソース張り付けて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>
    • good
    • 0

このQ&Aに関連する人気のQ&A

HTML 分割」に関するQ&A: CLOB型へのINSERT

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qframeset要素を使わずに画面を分割したい

アンテナ(下記サイト)のように左にメニュー画面を、右にコンテンツを表示するホームページを作成したいと考えています。
https://antenna.jp/

ひとつのウインドウで画面を2つにわけるためにはhtmlのframeset要素を使えばできることは把握しているのですが、上記サイトのアンテナではframesetを使わずに画面分割をしています。

見た目やレスポンシブ対応のしやすさも考え、できればframesetを使わずに画面分割を行いたいのですが、どのようにすれば可能でしょうか。
メニュー部分とコンテンツ部分を別々にスクロールできるようにしたいです。

どなたか分かる方教えてください。

Aベストアンサー

長くなるから、参考ページ参照。

参考URL:http://www.geocities.jp/eijispace/2012/0419.html

Q文字列が入っているtdを削除せず非表示にしたい

aboutをクラスとする列(以下、about列)を非表示にしようと、次のような設定をしました。

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>


<table>
<tr>
<th class="about">右が1へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト1</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト2</a></td>
</tr>
<tr>


</tr>
</table>

aboutの長さ自体を0にするように設定したため、about列は表示されないはずなのですが、"右が1へのリンクになります"、"右が2への~"と表示されます。
プログラムの動作にかかわるので、about列を削除することなく、CSSなどを設定することでabout列を非表示にしたいのですが、何か上手な方法はあるでしょうか。

よろしくお願いします。

aboutをクラスとする列(以下、about列)を非表示にしようと、次のような設定をしました。

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>


<table>
<tr>
<th class="about">右が1へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト1</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト2</a></td>
</tr>
<tr>


</tr>
</table>

aboutの長さ自体を0にするように設定し...続きを読む

Aベストアンサー

<table summary="なんたらの表">
<caption>なんたらの表</caption>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="ほげほげの表">
<caption>ほげほげの表</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="むにゃむにゃの表">
<caption>むにゃむにゃ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="へんてこな表">
<caption>へんてこ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

だとして、
table{
border-collapse:collapse;
border:solid 1px gray;
}
td,th{border:dotted 1px gray;width:20em;
}
table[summary="なんたらの表"] td,table[summary="なんたらの表"] th{display:none;}
table[summary="なんたらの表"] *+td,table[summary="なんたらの表"] *+th{display:table-cell;}

table[summary="ほげほげの表"] td,table[summary="ほげほげの表"] th{visibility:hidden;}
table[summary="ほげほげの表"] *+td,table[summary="ほげほげの表"] *+th{visibility:visible;}

table[summary="むにゃむにゃの表"] td:first-child,table[summary="むにゃむにゃの表"] th:first-child{display:none;}

table[summary="へんてこな"] td:first-child,table[summary="へんてこな表"] th:first-child{visibility:hidden;}


消滅させるならdisplay:none;→display:table-cell;
存在は残すけど表示させないならvisibility:hidden;→visibility:visibble;

セレクタは適当に・・・
隣接セレクタを使うなら +
第一列なら、擬似クラス:first

<table summary="なんたらの表">
<caption>なんたらの表</caption>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="ほげほげの表">
<caption>ほげほげの表</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="むにゃむにゃの表">
<caption>むにゃむにゃ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>...続きを読む

Qフレームサイズの変更について

過去ログを参照していたら、次のようなサンプルを発見したのですが、
IEでは動作しますが、FireFoxではエラーになってしまいます。
どこを修正すれば動くようになるでしょうか?

■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>

過去ログを参照していたら、次のようなサンプルを発見したのですが、
IEでは動作しますが、FireFoxではエラーになってしまいます。
どこを修正すれば動くようになるでしょうか?

■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>...続きを読む

Aベストアンサー

こんにちは

frame.htmlもjavascriptで書いてるけど特別な意味が?

サイズチェンジならこれでできると思います
"40%,60%"を変更

<script language="javascript"><!--
function sizech() {
parent.document.getElementsByTagName("frameset")[0].cols = "40%,60%";
}
//--></script>

<a href="***.html" onClick="sizech()">framesize change</a>

Q一覧から選択した行の行番号を取得について

はじめまして。
一覧を表示させて一覧の先頭の選択ボタンを押したした行の行番号の取得し、その行にシステム日付を表示させたいのですが、うまくいきません。
現在は、btn_selectにalertを入れて選択した行の番号が取得できたかどうか確認したところ、取得できず%{#stat.index}が出力されてしまいます。
どのようにすればボタンを押した行の行番号の取得及びその行のある項目にシステム日付を表示させることができますか?。
宜しくお願いします。

<%@ page contentType="text/html; charset=UTF-8" %>
<%@ page pageEncoding="Windows-31J" %>
<%@taglib prefix="s" uri="/struts-tags" %>
<%@taglib prefix="original" uri="/original-tags" %>
<%@taglib prefix="originalLY" uri="/original-LY-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="html-head.jsp" %>
<script type="text/javascript">
function btn_select(indx) {
alert (indx);
}
</script>
</head>
<body>
<%@ include file="HeaderTitle.jsp" %>
<s:form>
<table class="table_line" >
<tr>
<th rowspan=2 class="form_title_list" >選択</th>
<th rowspan=2 class="form_title_list" >A</th>
<th rowspan=2 class="form_title_list" >B</th>
<th rowspan=2 class="form_title_list" >C</th>
<th colspan=2 class="form_title_list" >D</th>
</tr>
<s:iterator value="shinchokuList" status="stat">
<tr>
<s:if test="%{#stat.index % 2 == 0}">
<td class="table_list1"><input type="button" value="選択" name="button"
onclick="btn_select(%{#stat.index});"/></td>
<td class="table_list1" ><s:textfield name="List[%{#stat.index}].A" size="10" maxlength="10" readonly="true" /></td>
<td class="table_list1" ><s:textfield name="sist[%{#stat.index}].B" size="63" maxlength="63" readonly="true" /></td>
<td class="table_list1" ><s:textfield name="List[%{#stat.index}].C" size="5" maxlength="5" readonly="true" /></td>
<td class="table_list1" ><s:textfield name="List[%{#stat.index}].D" size="10" maxlength="10" readonly="true" /></td>
<td class="table_list1" ><s:textfield name="List[%{#stat.index}].E" size="10" maxlength="10" readonly="false" cssStyle="%{eErr}"/></td>
</s:if>
</s:else>
</s:iterator>
</table>
</td>
</tr>
</table>
</s:form>
</body>
<html>

はじめまして。
一覧を表示させて一覧の先頭の選択ボタンを押したした行の行番号の取得し、その行にシステム日付を表示させたいのですが、うまくいきません。
現在は、btn_selectにalertを入れて選択した行の番号が取得できたかどうか確認したところ、取得できず%{#stat.index}が出力されてしまいます。
どのようにすればボタンを押した行の行番号の取得及びその行のある項目にシステム日付を表示させることができますか?。
宜しくお願いします。

<%@ page contentType="text/html; charset=UTF-8" %>
<%...続きを読む

Aベストアンサー

まず、目的の
「一覧を表示させて一覧の先頭の選択ボタンを押したした行の行番号の取得し、その行にシステム日付を表示させたい」
の達成方法についてですが、
行番号を取得する必要はありません。

次に質問内容についてですが、

(1)行番号の取得方法
TRタグのエレメントには、rowIndexというプロパティが用意されています。
それを用いれば行番号を取得できます。
方法としましては、ボタンのINPUTタグから親の親のTRタグを参照します。

具体例を下記に示します。
適当にテキストエディタにコピペして動きを確認してみてください。
**********
<html>
<head><title>rowIndex test</title></head>
<body>
<table border="1" bordercolor="red">
<tr>
<td>
<input type="button" value="zero" onclick="alert(this.parentNode.parentNode.rowIndex)">
</td>
</tr>
<tr>
<td>
<input type="button" value="one" onclick="alert(this.parentNode.parentNode.rowIndex)">
</td>
</tr>
</table>
</body>
</html>
**********

alertの中身についての説明を少々致します。
this・・・INPUTタグ自身をさす。
this.parentNode・・・INPUTタグの親のタグの、TDタグをさす。
this.parentNode.parentNode・・・INPUTタグの親の親のタグの、TRタグをさす。


(2)ボタンが押された行ある項目にシステム日付を表示する方法
こちらの質問に関しましては
上記(1)を一部利用します。
TRタグから対象となるTDタグを参照します。

具体例
**********
<html>
<head>
<title>rowIndex test</title>
<script type="text/javascript">
<!--
today=new Date();
y=today.getFullYear();
m=today.getMonth()+1;
d=today.getDate();

function insertToday(inputElement){
inputElement.parentNode.parentNode.childNodes[1].innerHTML=y+"/"+m+"/"+d;
}
//-->
</script>
</head>
<body>
<table border="1" bordercolor="red">
<tr>
<td style="width:100px">
<input type="button" value="zero" onclick="insertToday(this)">
</td>
<td style="width:100px"></td>
</tr>
<tr>
<td style="width:100px">
<input type="button" value="one" onclick="insertToday(this)">
</td>
<td style="width:100px"></td>
</tr>
</table>
</body>
</html>
**********

少々説明を致します。
childNode[n]・・・そのタグのn番目の子のタグを参照します。
nは、IEでは0から、Firefoxでは1からです。
このソースではchildNodes[1]となっているため、IEでは左から2セル目に格納されます。
Firefoxでは一番左のセルに格納されます。(ボタンは消えます)

まず、目的の
「一覧を表示させて一覧の先頭の選択ボタンを押したした行の行番号の取得し、その行にシステム日付を表示させたい」
の達成方法についてですが、
行番号を取得する必要はありません。

次に質問内容についてですが、

(1)行番号の取得方法
TRタグのエレメントには、rowIndexというプロパティが用意されています。
それを用いれば行番号を取得できます。
方法としましては、ボタンのINPUTタグから親の親のTRタグを参照します。

具体例を下記に示します。
適当にテキストエディタにコピ...続きを読む

Qdiv要素内の全input要素をdisable

Javascriptで、あるdiv要素内のチェックボックスやテキストフィールドなどのinput要素を
すべてdisableにしたいです。
以下でうまくいきません。どなたかお知恵を頂けないでしょうか?
よろしくお願い致します。
var input_tags = document.getElementById("div_id").getElementsByTagName("input");

for(var input_tag in input_tags)
{
input_tag.disabled = true;
}

Aベストアンサー

var input_tags = document.getElementById("div_id").getElementsByTagName("input");

for(var i=0;i<input_tags.length;i++){
input_tags[i].disabled = true;
}

Qテキストボックスの入力をリセット

ボタンが押されたら、テキストボックスの入力内容を削除するにはどうしたらいいでしょうか?

Aベストアンサー

こんな感じ。

<form>
<input type=button value="clear" onClick="this.form.t.value = ''">
<input type=text size=50 name=t>
</form>

ボタンの this.form.t の t が、テキストの名前になっていて、押されると
空の文字列を入れる、だけです。

もし、フォーム全体のテキストをクリアするならば、こんな方法もあります。

<form>
<input type=button value="clear" onClick="this.form.reset()">
<input type=text size=50 name=t1>
<input type=text size=50 name=t2>
<input type=text size=50 name=t3>
</form>

QAccessのRefresh・Requery・Repaintの違い

Requeryはもう一度ソースレコード(テーブル)を読み込むようです。このとき、テーブルの先頭レコードに移動してしまいます。
Refreshは最新のレコード(テーブル)を再表示するような気がします。レコードの移動は起こらない気がします。
Repaintは、VBAでキャプションなどを変更したとき使っています。
でも、よくわかっていません。
どんなときにどんなメソッドを使えばいいのでしょうか?
詳しい方、よろしくお願いいたします。

Aベストアンサー

たびたびすみません。
調べてたらこんなのがでてきました。
http://www.nurs.or.jp/~ppoy/access/access/acF007.html

参考URL:http://www.nurs.or.jp/~ppoy/access/access/acF007.html

Q