top はフレーム分割の際のトップ、parent はフレーム分割のひとつ親

となっていましたが、意味(違い)がわかりませんので教えて下さい。

初心者に分かるように説明してください。
よろしく御願いします。

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

A 回答 (2件)

フレームを利用する場合、フレーム分割したものをさらにフレーム分割する、といったことが可能ですので、どんどん入れ子にしていくことが可能です。


フレーム(A)の中にフレーム(B)をつくり、その中にさらにフレーム(C)を作った場合、フレーム(C)から見ると、top は (A)、parent は(B)になります。
しかしフレーム(B)から見ると、top が(A)、parent も(A)となり、この場合のtopとparentは同じフレームをあらわします。
    • good
    • 0
この回答へのお礼

分かりやすいご回答ありがとうございました。

最初の分割画面のtop、つまり(A)は左側の分割画面でしょうか?

お礼日時:2002/03/01 10:42

>最初の分割画面のtop、つまり(A)は左側の分割画面でしょうか?



 フレームといっても分割されていない一つだけのフレームを作ることもできますし、また分割方法も左右ではなく上下に分割することもできます。なので「左側の分割画面」というわけではないです。トップのフレームであればどこでもよいです。

 前述の例は入れ子構造を考えてますので、(A)のフレームのうちいずれかに(B)があり、その(B)もまたフレームページになっていて、そのフレームのいずれかが(C)である場合です。

※文章だとちょっと表現が難しいですね(^^;
    • good
    • 0

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

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

Qインラインフレームで組まれたHTMLで子フレームより、親フレームのUR

インラインフレームで組まれたHTMLで子フレームより、親フレームのURLを参照したいです。
parent.locationで参照出来ることは、わかったのですが、サイトの制御がかかっているようで
これは、使えないようです。

サイトは、楽天です。

他に何か方法があればと思うのですが、
ご教授のほど、お願い致します。

Aベストアンサー

楽天に限らず、javascriptで他のサイトのコンテンツにアクセスする事は出来ません。
<iframe>でも<frameset>でもajaxでも不可能です。
どうしても、自サイト内に別途代理応答的な動きをするプログラムが必要です。
楽天の何を取得したいのかわかりませんが、RSS Feedみたいな特定のXMLなら
アクセス用のAPIサービスを提供しているサイトもありますが...
http://code.google.com/intl/ja/apis/ajax/documentation/
http://code.google.com/intl/ja/apis/ajaxlanguage/documentation/
http://developer.yahoo.co.jp/
http://pipes.yahoo.com/poolmmjp/feed_api
http://www.ajax-cross-domain.com/

Qフレーム内から開いたサブウィンドウから親ウィンドウの別フレームの操作を行いたい

メニュー、メインの2つのフレーム分けしてあるページで、メインページからサブウィンドウを開きます。
その後、以下の2アクションを同時に行いたいのです。
(1)サブウィンドウから親ウィンドウ(メイン)をジャンプさせる
(main.html→main2.cgi)
(2)親ウィンドウ(メニュー)の画像をAからBに変更させる

現在window.openerでメインページの変更はできているのですが、
メニューページの画像のを変更がうまくできません。

方法としては
(1)サブから親ウィンドウ(画像=A)を閉じさせて、再び親ウィンドウ(画像=B)を
フレームセットごとムリヤリ開き直す。

(2)何らかの形でメニューページの情報を保存しておき、Onloadでサブからのジャンプ時に変更させる

(3)サブから親ウィンドウのフレーム越し操作を行なって、メニューページの画像を変更する。

どの方法が可能でしょうか、もっといい方法がありますか。
お知恵拝借させてください。よろしくお願いします。

以下、かなり省略したソース説明です。

【フレームセット→cgi。記述は省略】
<frameset>
 <frame src="menu.html" name="menu">
 <frame src="main.html" name="main">
</frameset>

【メニュー→html】
<img src="A">

【メイン→html】
function open_sub(url) {
/**/
w = window.open(url, 'sub')
}
<!--本文-->
<a href="javascript:open_sub('sub.html')">サブウィンドウ</a>

【サブ→html】
function change_main() {
window.opener.location.href="main2.cgi?sub";
window.opener.focus();
}
<!--本文-->
<A HREF="JavaScript:change_main()">メインを変更</A>

メニュー、メインの2つのフレーム分けしてあるページで、メインページからサブウィンドウを開きます。
その後、以下の2アクションを同時に行いたいのです。
(1)サブウィンドウから親ウィンドウ(メイン)をジャンプさせる
(main.html→main2.cgi)
(2)親ウィンドウ(メニュー)の画像をAからBに変更させる

現在window.openerでメインページの変更はできているのですが、
メニューページの画像のを変更がうまくできません。

方法としては
(1)サブから親ウィンドウ(画像=A)を閉じさせて、再び親ウィ...続きを読む

Aベストアンサー

>(3)サブから親ウィンドウのフレーム越し操作を行なって、メニューページの画像を変更する。
この方法で可能だと思います。
画像表示の<IMG>タグ(イメージオブジェクト)に名前を付けます。
そして、そのファイルを指定するURLをフレーム越しに動的に変更します。

変更例)

【メニュー→html】
<img src="A" name="g_1">

【サブ→html】
function change_main() {
window.opener.top.menu.document.g_1.src="B";
window.opener.location.href="main2.cgi?sub";
window.opener.focus();
}

Qインラインフレーム内のcssを親フレームに適用する

インラインフレーム(子ウィンドウ)に表示されているページ(同一ドメイン上のページです)で読み込まれているcssを、ページ読み込み時に親ウィンドウ側でも読み込みたいと思っています。

内容としては

親ウィンドウ側css呼び出し部分
<link rel="stylesheet" type="text/css" href="test.css">
<link rel="stylesheet" type="text/css" href="test1.css">

子ウィンドウ側css呼び出し部分
<link rel="stylesheet" type="text/css" href="test.css">
<link rel="stylesheet" type="text/css" href="test2.css">

となっているソースをページ呼び出し時に

親ウィンドウ側css呼び出し部分
<link rel="stylesheet" type="text/css" href="test.css">
<link rel="stylesheet" type="text/css" href="test2.css">

子ウィンドウ側css呼び出し部分
<link rel="stylesheet" type="text/css" href="test.css">
<link rel="stylesheet" type="text/css" href="test2.css">

のように共通していないcssを子ウィンドウ側に合わせて変更したいのです。

子ウィンドウ内のページのソースは訳があって編集する事が出来ないので、親ウィンドウ側で子ウィンドウ内の <link rel="stylesheet" type="text/css" href="test2.css"> の href の値を読みこみ、親ウィンドウ側の href の値を置き換えるといった方法では無いかと思うのですが、具体的にどうすればよいのか分かりません。

どなたかご存知の方、ご教授ください。
よろしくお願いいたします。

また、ブラウザはIE6~8と、Firefoxを想定しています。

インラインフレーム(子ウィンドウ)に表示されているページ(同一ドメイン上のページです)で読み込まれているcssを、ページ読み込み時に親ウィンドウ側でも読み込みたいと思っています。

内容としては

親ウィンドウ側css呼び出し部分
<link rel="stylesheet" type="text/css" href="test.css">
<link rel="stylesheet" type="text/css" href="test1.css">

子ウィンドウ側css呼び出し部分
<link rel="stylesheet" type="text/css" href="test.css">
<link rel="stylesheet" type="text/css" href="t...続きを読む

Aベストアンサー

No1,No2の回答者です。
以下のようにしたら、一応出来ました。IE7.0とFireFox3.0で試しました。
(※全部のCSSプロパティを試したわけではありませんので...)

-test2.cssのスタイルシートのシートオブジェクトよりcssRules又はrulesのメソッドでルールのセレクター、プロパティーを取得し、test2.cssのスタイルシートのシートオブジェクトにaddRule又はinsertRuleのメソッドで追加しました。

ブラウザーによってやり方が異なるようなので、無駄な部分があります。
ブラウザーによって異なるロジックで動くように修正するべきかもしれません。
<参考サイトを見て適時にカストマイズしました。カメライズ関数はそのまま使わせてもらいました。>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>IframeTestCSS</title>
<link rel="stylesheet" type="text/css" href="./test.css">
<link rel="stylesheet" type="text/css" href="./test1.css">
</script>
<script type="text/javascript" charset="utf-8">
<!--
window.onload = function () {
child_Css = hoge.document.styleSheets[1];
My_css = document.styleSheets[1];
var child_rules = child_Css.rules?child_Css.rules:child_Css.cssRules;
for (i=0;i<child_rules.length;i++){
selector = child_rules[i].selectorText;
selector = selector.toLowerCase();
rule = "";
for (property in child_rules[0].style) {
attribute = child_rules[i].style[property.camelize()];
if (attribute){
rule += property + ":" + attribute +";";
if(window.ActiveXObject){
My_css.addRule(selector , " { " + rule + " }",My_css.rules.length+1);
}else{
My_css.insertRule(selector + " { " + rule + " }",My_css.cssRules.length);
}
}
}
}
}
String.prototype.camelize = function( ) {
return this.replace( /-([a-z])/g,
function( $0, $1 ) { return $1.toUpperCase( ) } );
}
String.prototype.deCamelize = function( ) {
return this.replace( /[A-Z]/g,
function( $0 ) { return "-" + $0.toLowerCase( ) } );
}
// -->
</script>
</head>
<body>
<h1>CSS TEST</h1>
<hr />
<iframe name="hoge" src="./iframetest2.htm" height="480" width="640"></iframe>
<hr />
</body>
</html>

参考URL:http://bmky.net/text/note/javascript-css/

No1,No2の回答者です。
以下のようにしたら、一応出来ました。IE7.0とFireFox3.0で試しました。
(※全部のCSSプロパティを試したわけではありませんので...)

-test2.cssのスタイルシートのシートオブジェクトよりcssRules又はrulesのメソッドでルールのセレクター、プロパティーを取得し、test2.cssのスタイルシートのシートオブジェクトにaddRule又はinsertRuleのメソッドで追加しました。

ブラウザーによってやり方が異なるようなので、無駄な部分があります。
ブラウザーによって異なるロジックで動...続きを読む

Qtopから孫フレームへのアクセス方法

トップフレームから↓の感じでフレーム階層を作っています。

[topフレーム]
...
<iframe src="子.jsp"/>
...

[子.jsp]
<frameset rows="50%,50%" id="ko">
 <frame src="孫1.jsp" id="mago1"/>
 <frame src="孫2.jsp" id="mago2"/>
</frameset>

topフレームから「孫1.jsp」「孫2.jsp」内の要素にJavaScriptでアクセスする方法があれば教えてください。

Aベストアンサー

・ Firefox等にに対応するには、name属性を使ってください。

<iframe src="子.jsp" name="iframe0"/>

 <frame src="孫1.jsp" id="mago1" name="mago1"/>
 <frame src="孫2.jsp" id="mago2" name="mago2"/>

そうすれば、name="mago2"のwindowオブジェクトに
window.frames.iframe0.mago2
window.frames['iframe0']['mago2']
window.frames.iframe0['mago2']

また、ほかのフレームがないとき、インデックスを利用して
window.frames[0].frames[1]
としてアクセスできます。

Qフレーム分割領域のサイズを変更する

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

Aベストアンサー

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

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

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


人気Q&Aランキング

おすすめ情報