iframeの内側と外側の不一致について(追加)

[新着] Webテンプレートを仮オープンしました



0   名前: 駆け出し : 2006/03/03 19:43
初めて利用いたします、よろしくお願いします。

中央にiframeがあり、左にボタンが数個ある画面があります。
JavaScriptを利用し、左のボタンにて、フレーム外側の画像と、同時にフレーム内のテキストを切り替えております。
ボタンA→B→Cを押したとしまして、Cの状態からユーザが「戻る」を利用すると、画面外側はCのまま、iframe内のテキストだけ、B→Aと戻ってしまい、外側と内側で内容の不一致が起きてしまいます。

そもそもこのような作りにした理由は、複数のページから同じ内容のテキストを利用するため、テキストを別ページにもち、1つのテキストを変更するだけで全ページに反映されるようにしたかった為です。

ありがたい解決方法としては、(上ほどよい)
1)戻ると利用すると、周りの画像も一緒に変化する。
2)戻るとフレームページの前のページまで戻る(キャッシュしない??)。
3)iframeを利用せず、もともとの目的を達成する。
となります。
助言よろしくお願い致します。

1   名前: m035 : 2006/03/03 19:43  [URL
urlに表示情報を埋め込んでおき、JavaScriptでその情報から
フレーム外側の画像と、同時にフレーム内のテキストを切り替える用にすれば可能です。
http://www.google.co.jp?数値
のようにurlの後ろにクエリとして「?データ」を追加します。
ブラウザの戻るボタンで戻ったときもonloadにurlにデータが含まれていたら
画像とテキストを切り替える関数を呼び出すようにして、ボタンのonclickに指定した関数を再利用すればいいでしょう。
urlの?以降はlocation.searchで抜き出せます。
ボタンのonclickには引数をurlに付加してジャンプするような関数を新たにセットすればいいと思います。

2   名前: 駆け出し : 2006/03/03 19:43
m035さん、素早い返信ありがとうございます。
「URL#値」で切り替えていたものを、「URL?値」にすることで、見事解決いたしました。
同ページ(index.htmlとすると)内から<a href="index.html#値">でジャンプしようとすると、切り替わらなくて困っていたことを記述し忘れていました。
本当に助かりました。解決と致します。

3   名前: 駆け出し : 2006/03/03 19:43
折角なので追加のご質問ですが、2)を実現する方法はありますでしょうか?

4   名前: m035 : 2006/03/03 19:43  [URL
iframeのurlをlocation.replaceで切り替えれば可能だと思います。
この場合、クエリで切り替えるのではなく、
onclick時に直接画像とiframeのurlを切り替えなければいけません。
下記はサンプルです。

<html>
<head>
<title>test</title>
<script type="text/javascript">
<!--
function ch(){
frames[0].location.replace("http://www.yahoo.co.jp/");
document.images[0].src="http://i.yimg.jp/images/main13.gif";
}
//-->
</script>
</head>
<body>
<form>
<iframe src="http://www.google.co.jp/">インラインフレームが使えないときのメッセージ</iframe><br>
<img src="http://www.google.com/images/logo_sm.gif" alt="切り替えイメージ"><br>
<input type="button" value="ch" onclick="ch()">
</form>
</body>
</html>

一覧へ戻る