押されたボタンによって画面に表示するものを変えたい

前提・実現したいこと

発生している問題・エラーメッセージ

画面に配置する
Gボタンが押されたら
画面にGoogle.co.jpを表示
Yボタンが押されたら
画面にyahoo.jpを表示
する方法はありますか？

表示するときは、
今見ているページから移動しないで、今見ているページに表示する方法でお願いします。

試したこと

こちらのコードを改造してみたのですが、非表示の時に表示する方法が分かりません。
ご回答よろしくお願いします。

補足情報（FW/ツールのバージョンなど）

localhost
XAMPP

図

現在のページ写真

x_x

2020/03/12 05:41

ボタンを押す前は何があるのでしょうか？

退会済みユーザー

2020/03/12 05:45

本文に写真を追加しておきます。

x_x

2020/03/12 05:54

iframe ということですか？

退会済みユーザー

2020/03/12 05:55

ボタンを押す前は、初期設定でgoogleの検索ページが表示されています。 Yボタンが押されたら真ん中にYahooの検索ページを表示する。 Gボタンが押されたら真ん中にgoogleの検索ページを表示する。という仕組みをページに入れたいです。

退会済みユーザー

2020/03/12 05:55

iframeです。

x_x

2020/03/12 05:55

押す前の時点ですでにエラーのようですが？

退会済みユーザー

2020/03/12 05:57

googleでの切断が拒否されていますが、そこは自分で治します。

行動規範の内容に同意します

回答3件

ベストアンサー

20年前の古い参考書を見ているのでしょうか？
フレームにどこのサイトのリソースでも埋め込める時代はとっくに終わっていて、X-Frame-Options ヘッダによって制限されます。
https://developer.mozilla.org/ja/docs/Web/HTTP/X-Frame-Options

以下、iframe ということを知る前の考え。

親

HTML
1<a href="buttons.html" target="_blank">Buttons</a>

子

JavaScript
1document.addEventListener('click', function(event) {
2  var a = event.target.closest('a[href]');
3  if (opener && a) {
4    opener.location = a.href;
5    event.preventDefault();
6    return false;
7  }
8}, false);

投稿2020/03/12 06:09

x_x

総合スコア13749

退会済みユーザー

2020/03/12 06:11

つまりできないという事ですか？

x_x

2020/03/12 06:12

Google も Yahoo も管理下にないでしょうからそうなります。

退会済みユーザー

2020/03/12 06:13

自分で製作したページでは見れるという事ですか？その場合だとどの様な仕組みなるのでしょうか

x_x

2020/03/12 06:22

すべて同一サイトということであれば、単にリンクするだけです。 <iframe src="1.html" name="a"></iframe> <a href="2.html" target="a">2</a> https://developer.mozilla.org/ja/docs/Web/HTML/Element/iframe

退会済みユーザー

2020/03/12 06:43

ありがとうございます。成功しました。

退会済みユーザー

2020/03/12 10:59

成功したのですが、問題が起きました。初期設定でページAを表示してあるのですが, ページBボタンを押すとページBが一瞬表示されて、すぐにページAが再表示されるのですが、修正は可能ですか？

x_x

2020/03/16 00:46

ページBで何かしているのでしょうが、それは示されていないので不明です。

行動規範の内容に同意します

HTML
1<form action="http://www.google.co.jp">
2<button type="submit">g</button>
3</form>
4<form action="http://www.yahoo.co.jp">
5<button type="submit">y</button>
6</form>

投稿2020/03/12 03:40

yambejp

総合スコア114843

yambejp

2020/03/12 03:43 編集

> 今いるページから移動しない方法しまった・・・ formにそれぞれtarget="_blank"を指定するとか・・・

退会済みユーザー

2020/03/12 04:22

どういう意味ですか？

yambejp

2020/03/12 04:25 編集

こういうことです（説明したままですが・・・） <form action="ttp://www.google.co.jp" target="_blank"> <button type="submit">g</button> </form> <form action="ttp://www.yahoo.co.jp" target="_blank"> <button type="submit">y</button> </form>

退会済みユーザー

2020/03/12 05:00

こちらのコードを使ってみたのですが、直接google.co.jpにアクセスされてしまいます。。。

yambejp

2020/03/12 05:04

> 直接google.co.jpにアクセス別ウィンドウが開きませんか？

退会済みユーザー

2020/03/12 05:05

開きませんでした。ページを移動しないで、今見ているページにgoogle.co.jpやyahoo.jpを表示できるようにしたいのですが...

yambejp

2020/03/12 05:07 編集

>　ページを移動しないで、今見ているページにごめんなさい、日本語として意味が矛盾しています今見ているページに表示されることを「移動」といいませんか？