ここから本文です

フレーム 一つのフレームのリンクをクリックしたとき、そのフレームをhtmlファ...

asd********さん

2019/4/2810:34:32

フレーム

一つのフレームのリンクをクリックしたとき、そのフレームをhtmlファイルaにすると同時に、もう一つのフレームをhtmlファイルbにするのはできないですか?

閲覧数:
14
回答数:
1
お礼:
25枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

ois********さん

2019/4/2812:59:41

■■■ まず、はじめに。 ■■■


フレームっていうのは、
<frameset> をタグ使って設置しているフレームだろうか。
もしそうなら、
<frameset> というタグは既に廃止されているんで、使うのはやめる。
廃止されたタグを使って作成されたページは、
今後のインターネットブラウザでは正しく表示される保証がない。
今後は、かわりに <iframe> を使う。



■■■ フレームのコントロール ■■■


一つのフレームのリンクをクリックしたとき、
そのフレームをhtmlファイル A にすると同時に、
もう一つのフレームをhtmlファイル B にするのは、
HTML だけではできない。
簡単な Javascript を少し使うことになる。

たとえば、
「index.html」というページに、
<iframe> タグを使って2つのフレームを設置し、
1つの <iframe> には「page1.html」を、
もう1つには「page2.html」を表示したとする。
2つの <iframe> には、
それぞれ「frame1」、「frame2」と name 属性を付けて区別する。

────────────────
【 index.html 】

<iframe name="frame1" src="page1.html"></iframe>
<iframe name="frame2" src="page1.html"></iframe>


【 page1.html 】

<a href="#">リンク1</a>


【 page2.html 】

<a href="#">リンク2</a>
────────────────

「page1.html」のリンク1をクリックしたときに、
「frame2」に表示するページを「B.html」にするには、
「page1.html」のリンク1のリンク先に、
「frame2」のページを切替える
Javascript のコードを指定すればいい。

「page1.html」からみて親フレームにあたる「index.html」は、
「top」で取得できるから、
「frame2」は「top.frame2」となる。
そこに表示するページを「B.html」にする Javascript コードは、

────────────────
top.frame2.location.href = 'B.html';
────────────────

この Javascript コードを、
「page1.html」の「リンク1」の href 属性に指定。

────────────────
【 index.html 】

<iframe name="frame1" src="page1.html"></iframe>
<iframe name="frame2" src="page1.html"></iframe>


【 page1.html 】

<a href="javascript:top.frame2.location.href = 'B.html';">
リンク1
</a>
────────────────

これで、
「page1.html」の「リンク1」をクリックすると、
「frame2」に「B.html」のページが表示される。

「frame1」の表示を「A.html」に変える場合は、
「frame1」は「page1.html」からみると自分自身のフレームだから、
「top」で親フレームを取得する必要はなく、

────────────────
location.href = "A.html";
────────────────

だけでいい。
この Javascript コードも、
同時に「リンク1」の href 属性に指定する。

────────────────
<a href="javascript:
location.href = 'A.html';
top.frame2.location.href = 'B.html';
">リンク1</a>
────────────────

これで完成。
以下、まとめ。

────────────────
【 index.html 】

<iframe name="frame1" src="page1.html"></iframe>
<iframe name="frame2" src="page1.html"></iframe>


【 page1.html 】

<a href="javascript:
location.href = 'A.html';
top.frame2.location.href = 'B.html';
">リンク1</a>

【 page2.html 】

<a href="#">リンク2</a>

────────────────

質問した人からのコメント

2019/4/29 13:04:01

廃止されているの知らなかったです

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる