javascriptで作りたいと思いどなたかできるかどうかアドバイス頂けますでしょうか。

javascriptで現在のページからリンク先ページに移動した際に、同一ウインドウ内でリンクし、なおかつリンク先にあるiframeも変更したいと思ってます。
例:A.html→(A.html内のリンクからB.html及びB.html内のiframeをC.htmlに変更)→リンク後ページB.html(iframe:C.html)
すいませんがよろしくお願いします。

回答の条件
  • 1人5回まで
  • 登録:2009/06/18 14:54:09
  • 終了:2009/06/19 12:54:33

ベストアンサー

id:ku__ra__ge No.2

ku__ra__ge回答回数118ベストアンサー獲得回数402009/06/18 23:29:31

ポイント300pt

今ひとつ、質問文から希望とする動作が理解しきれていませんが、

1. A.html 内にあるリンク1から B.html を開いた場合は B.html 内の iframe に C.html が表示される。

2. A.html 内にあるリンク2から B.html を開いた場合は B.html 内の iframe に D.html が表示される。

3. B.html を直接開いた場合は、B.html 内の iframe に E.html 以外が表示される。

という動作をさせたいのであれば、以下のようなhtmlで実現できます。

A.html

<a href="b.html?C.html">C link</a>
<a href="b.html?D.html">D link</a>

B.html

<body onload="changeFrame()">
<script>
function changeFrame() {
  if(location.search.length > 0) {
    document.getElementById('fra').src=location.search.substr(1);
  }
}
</script>
<iframe id="fra" src="E.html">

※C.html, D.html, E.html は自前で適当なのを用意してください。

id:RyuHarumaki

お返事遅れてすいません。

回答ありがとうございます。

試してみたところ無事できました。

今回で、getElementByIdとsearchなどよくつかわれることが多いと思いますが、

かなり勉強になりました。

回答いただいた方に感謝いたします。ありがとうございます。

2009/06/19 12:51:58

その他の回答(1件)

id:munyaX No.1

munyaX回答回数120ベストアンサー獲得回数242009/06/18 15:31:43

ポイント100pt

location.searchを利用する方法はいかがでしょうか?

以下、ちょっと手抜きですがサンプルです。

 ※セキュリティホール的な部分があるので、実装される際は御留意を。

A.html

---------------

<script></p> <p>location.href = 'B.html?c';</p> <p></script>

---------------


B.html

---------------

<script></p> <p>var file = location.search + '.html';</p> <p>var obj = document.createElement('iframe');</p> <p>obj.setAttribute('src', file);</p> <p>document.getElementById('canvas').appendChild(obj);</p> <p></script>

---------------


location.searchの変わりにCookieを使う手もあります。

id:RyuHarumaki

回答ありがとうございます。

試してみたところ私の技術不足かもしれませんが、

リンクは飛んだのですが、リンク先のiframeがうまく変更しませんでした。

答えていただいたものを参考に試行錯誤してみたいとおもいます。

まだ、他にこれはというのがありましたら

よろしくお願いします。

2009/06/18 16:04:42
id:ku__ra__ge No.2

ku__ra__ge回答回数118ベストアンサー獲得回数402009/06/18 23:29:31ここでベストアンサー

ポイント300pt

今ひとつ、質問文から希望とする動作が理解しきれていませんが、

1. A.html 内にあるリンク1から B.html を開いた場合は B.html 内の iframe に C.html が表示される。

2. A.html 内にあるリンク2から B.html を開いた場合は B.html 内の iframe に D.html が表示される。

3. B.html を直接開いた場合は、B.html 内の iframe に E.html 以外が表示される。

という動作をさせたいのであれば、以下のようなhtmlで実現できます。

A.html

<a href="b.html?C.html">C link</a>
<a href="b.html?D.html">D link</a>

B.html

<body onload="changeFrame()">
<script>
function changeFrame() {
  if(location.search.length > 0) {
    document.getElementById('fra').src=location.search.substr(1);
  }
}
</script>
<iframe id="fra" src="E.html">

※C.html, D.html, E.html は自前で適当なのを用意してください。

id:RyuHarumaki

お返事遅れてすいません。

回答ありがとうございます。

試してみたところ無事できました。

今回で、getElementByIdとsearchなどよくつかわれることが多いと思いますが、

かなり勉強になりました。

回答いただいた方に感謝いたします。ありがとうございます。

2009/06/19 12:51:58
  • id:munyaX
    すみません。
    どうもはてなの不思議仕様で変な感じにタグがついたり消えたりしていたようです・・・。

    A.html
    ---------------
    <script>
    location.href = 'B.html?c';
    </script>
    ---------------


    B.html
    ---------------
    <div id="canvas"></div>

    <script>
    var file = location.search + '.html';

    var obj = document.createElement('iframe');
    obj.setAttribute('src', file);
    document.getElementById('canvas').appendChild(obj);
    </script>
    ---------------

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません