iframeクッキー指定（？）

質問

iframeを使用しているのですが、
index.html　のiframe内に　a.html　を、
<iframe src=a.html　～>で表示しています。

そこで、index.html　内のリンクでiframe内に　b.html　を表示します。
ここで更新を押すと、iframe内には　a.html　が表示された状態に戻ります。そこで、b.htmlを表示したままにしたいのでクッキーを使用して可能にしているのですが、
index.html　内のリンクでc.htmlを表示して更新を押した際にも　c.htmlが、（c.htmlにクッキーを使用しないとb.htmlが）表示された状態になります。

b.html　を表示した状態で更新を押すと、クッキーによって、b.html　を表示したままにし、
c.html　を表示した状態で更新を押すと、クッキーを解除し、a.html　を表示する方法を教えてください!!

（c.htmlのようなファイルが複数あって、b.htmlのようなファイルは1つです。）

javascript超初心者ですので、サンプルなど、記載して説明してくださると助かります。

回答No.1

arexis · ベストアンサー

前回書いた物です。
とりあえず前回のものを使ってるなら

<script type="text/javascript">
var cook_key = "iframesrc"; /* クッキーのキーになる適当な名前 */

window.onload = function(){
if(cook_src) document.getElementById('fffffid').src = '';
var cook_src;
var cookies = document.cookie.split(';');
for(var i=0; i<cookies.length; i++){
if(cookies[i].indexOf(cook_key) >-1){ cook_src = cookies[i].split('='); break; }
}
document.getElementById('fffffid').src = cook_src ? (cook_src[1] ? cook_src[1] : 'a.html') : 'a.html';
}

function setCook(arg){ document.cookie = cook_key + '=' + arg + ';'; }
document.write(document.cookie)
</script>

<a href="./a.html" target="fffff" onclick="setCook(this.href)">test</a>
<a href="./b.html" target="fffff" onclick="setCook(this.href)">test</a>
<a href="./c.html" target="fffff" onclick="setCook('')">test</a>

<iframe id="fffffid" name="fffff" src="./a.html"></iframe>

c.htmlのような場所には
setCook('')の様に書けばOKです。

前回のスクリプトのままで使うなら
c.htmlのような場所は
setCook('http://ここはフルUR・・a.html')
の様に書けばそれでもいけます。

お礼

お礼の部分にかかせていただきます。
すみません。スクリプトの指定を間違えていただけで、
そこを直すと動作しました！！

しかし、inde.htmlと、iframe内に
count=数字; iframesrc; count=数字; 0505349NQ=3dxanhujdxbveivabbj&00abbj; 0505349NT=あどれす; NinjaSTpV=1200815257375 count=数字; iframesrc; count=数字; 0505349NQ=3dxanhujdxbveivabbj&00abbj; 0505349NT=あどれす; NinjaSTpV=1200815257375
といった文字が表示されます。
表示しないようにするにはどうすればいいでしょか？
教えてください。

また、補足で述べた　iframeの高さ可変の動作についても、
解決していないので、教えてください。

補足

testページを作ってやってみました。
（c.htmlは複数存在するので、d.htmlをc.htmlと同じ設定で追加しました。）

まず、前回のスクリプトのままで使ってみました。
前回のスクリプト

var cook_key = "iframesrc"; /* クッキーのキーになる適当な名前 */
window.onload = function(){
if(cook_src) document.getElementById('fffffid').src = '';
var cook_src;
var cookies = document.cookie.split(';');
for(var i=0; i<cookies.length; i++){
if(cookies[i].indexOf(cook_key) >-1){ cook_src = cookies[i].split('='); break; }
}
document.getElementById('fffffid').src = cook_src? cook_src[1] : 'a.html';
}
function setCook(arg){ document.cookie = cook_key + '=' + arg + ';'; }

を、standard.jsにいれ、
index.html～d.html（すべてのファイル）に
　<script type="text/javascript" src="/standard.js"></script>
　<script language="JavaScript" src="/standard.js"></script>
で指定しました。

index.htmlのリンクは
　<a href="./a.html" target="fffff" onclick="setCook(this.href)">a</a>
　<a href="./b.html" target="fffff" onclick="setCook(this.href)">b</a>
　<a href="./c.html" target="fffff" setCook('http://ふるぱすa.html')>c</a>
　<a href="./d.html" target="fffff" setCook('http://ふるぱすa.html')>d</a>
とし、

iframeは

<script type="text/javascript">
var cook_key = "iframesrc"; /* クッキーのキーになる適当な名前 */
var cook_src;
var cookies = document.cookie.split(';');
for(var i=0; i<cookies.length; i++){
if(cookies[i].indexOf(cook_key) >-1){ cook_src = cookies[i].split('='); break; }
}
var file = cook_src? cook_src[1] : 'a.html';
document.write('<iframe id="fffffid" name="fffff" src="',file,'"></iframe>')

function setCook(arg){ document.cookie = cook_key + '=' + arg + ';'; }
</script>
<noscript>
<iframe id="fffffid" name="fffff" src="./a.html"></iframe>
</noscript>

としておきました。

結果
a.htmlが最初に表示される　○
b.htmlをクリックし、更新をおすと、b.htmlが表示される　○
c.htmlをクリックし、更新をおすと、a.htmlが表示される　×
　（b.htmlが表示されました。）
d.htmlをクリックし、更新をおすと、a.htmlが表示される　×
　（b.htmlが表示されました。）
a.htmlをクリックするとa.htmlが表示される　×
　（一瞬a.htmlが表示され、すぐに白紙ページに飛びます）
a.htmlをクリックし、更新をおすと、a.htmlが表示される　×
　（一瞬a.htmlが表示され、すぐに白紙ページに飛びます）

リンクの
　<a href="./a.html" target="fffff" onclick="setCook(this.href)">a</a>
を
　<a href="./a.html" target="fffff" setCook('http://ふるぱすa.html')">a</a>
としてもだめでした。

そこで、ANo.1で教えてくださったスクリプトで試してみました。
standard.js　内を、ANo.1の
　var cook_key = "iframesrc"; /* クッキーのキーになる適当な名前 */
　～
　document.write(document.cookie)
に変え、

index.htmlのリンクのc.htmlとd.htmlのところを、
onclick="setCook('')"　にかえてみました。

結果（先ほど書いたものと違う部分だけ書きます。）
c.htmlをクリックし、更新をおすと、a.htmlが表示される　×
　（404のページが表示されました）
d.htmlをクリックし、更新をおすと、a.htmlが表示される　×
　（404のページが表示されました）

スクリプトに
　; /* クッキーのキーになる適当な名前 */
とありますが、ここの値は変更していませんがよろしいですか？

自分なりに、スクリプト内が怪しいといじってみましたが、
状況はかわりませんでした。（いじった部分はあとで直しました）
解決法教えてください。

P.S.
私は、iframeに高さ可変のスクリプトを使用しています。
上記のクッキー設定をしても、動作しますが、動作が遅いです。（5秒くらいかかる）
高さ可変のスクリプトの動作を早める方法も良ければ、教えてください。

回答No.2

arexis

えっと、まず訂正から
#1に書いたスクリプトの部分ですが
document.write(document.cookie)
この部分は、私がテストする時に確認用に付けた物で不要の物です(^^;
この行は削除してください。(クッキーの中身を表示させる物)

/* クッキーのキーになる適当な名前 */
に関しては、半角英数文字で自由に変更可能です。

*************************
あと、
前に質問者さんの質問でも見かけたと思うのですが
<script type="text/javascript" src="/standard.js"></script>
<script language="JavaScript" src="/standard.js"></script>
この2重指定って、何らかの特殊なケースを想定してのことですか?
普通に2度実行されてしまう物が出てきてしまうかと・・

************************
iframeの高さの変更ですが、前の方にある質問ですね。
ちょっと中身をきちんと見ていませんが^^;

時間がかかるのは例えばローカルでテスト用に組んで行っても同じですか？
ローカルでは瞬時で変更されて、サーバー上では5秒かかるとすれば、
コンテンツ量やサーバーレスポンスとの兼ね合いもあると思います。
基本的にJavaScriptでドキュメント内のエレメントを操作する場合は、
ドキュメントが全て読み込まれてからとか、対象エレメントが読み込まれてからと言うタイミングになります。
複雑な構造や大量のコンテンツの場合は、実行タイミングなどもどんどん遅くなっていく場合も多いです。

お礼

document.write(document.cookie)
これを削除したら無事消えました。

*************************
<script type="text/javascript" src="/standard.js"></script>
<script language="JavaScript" src="/standard.js"></script>
はい、何らかの特殊なケースを想定したためだったのですが・・・
ご指摘もらったので、
<script language="JavaScript" src="/standard.js"></script>
だけにすると、動作速度が3倍ほどにあがりました！
高さ可変の動作も上記によって、早くなりました。

c.htmlやd.htmlを開いたときに更新を押すと、
404になっていたのですが、
スクリプト内のiframeの
src="',file,'"　を　src="a.html"になおせば出来ました。

色々助かりました。本当にありがとうございました！