IEでiframe内のcookieを保持

前へ 次へ
このQ&Aのポイント
  • 楽天ショップのJavaScriptメニューをiframe内で表示し、IEでもcookieを保持する方法について教えてください。
  • 楽天ショップの開閉式メニューをiframeで表示していますが、IEではcookieが保持されません。どのように対応すれば良いでしょうか。
  • 楽天ショップでJavaScriptメニューをiframe内に表示していますが、IEでcookieの保持ができません。対策方法を教えてください。
回答を見る
  • ベストアンサー

IEでiframe内のcookieを保持

楽天ショップでJavaScriptを利用した開閉式のメニューを実装しています。 左サイドの「メンズ」「レディース」の箇所です。 http://www.rakuten.co.jp/magicmarket/ 楽天の通常ページでは<Script>タグの記述ができない為、別サーバで作ったメニューをiframeで表示しています。 http://www.rakuten.ne.jp/gold/magicmarket/left.html iframeの使い方に無理があるのは承知ですが、楽天内では苦肉の策としてよく使われています。 メニューにはSlashdot Menuというこちらのスクリプトを使用しています。 http://www.dynamicdrive.com/dynamicindex1/slashdot.htm 開閉状態をブラウザのcookieに保持しているので、デフォルトで開いた状態のものを一度閉じて更新すると閉じた状態で表示されます。 （ページ遷移しても同様です） http://www.rakuten.ne.jp/gold/magicmarket/left.html firefoxなどで動作確認するとiframe内でも正常に動作しています。 http://www.rakuten.co.jp/magicmarket/ IEでも保持できれば完璧なのですが、iframe内のcookieを保持する方法はありませんでしょうか。 アドバイス頂けると助かります。 よろしくお願い致します。

質問者が選んだベストアンサー

  • ベストアンサー
  • yuu_x
  • ベストアンサー率52% (106/202)
回答No.3

恐らく、間接的には iframe にした事が原因ですが、根本は、別ドメインのクッキーの読み書きがセキュリティに引っかかったためかと思います。 書き込み : document.cookie = "sdmenu_" + encodeURIComponent(this.menu.id) + "=" + states.join("") + "; expires=" + d.toGMTString() + "; path=/"; ↓ document.cookie = "sdmenu_" + encodeURIComponent(this.menu.id) + "=" + states.join("") + "; expires=" + d.toUTCString() + "; path=/magicmarket/; " + "domain=www.rakuten.co.jp"; 又は、 parent.document.cookie = "sdmenu_" + encodeURIComponent(this.menu.id) + "=" + states.join("") + "; expires=" + d.toUTCString() + "; path=/magicmarket/"; # "path=/" 楽天トップに直に書いて大丈夫なんですか？ 読み込み parent.document.cookie

dummygo
質問者

お礼

ありがとうございます。 不具合の原因と実現したいことはまさにご指摘の通りです。 同一ドメイン内でiframeはOKでしたので別ドメインのcookie処理ということですね。 ちなみに解決にはなりませんがインターネットオプションのプライバシーを低レベルに下げれば動作しました。 sdmenu.jsを教えて頂いた通り記述してみましたが保持はできませんでした。 http://www.rakuten.ne.jp/gold/magicmarket/scripts/sdmenu.js やはり無理があるのでしょうか。 > # "path=/" 楽天トップに直に書いて大丈夫なんですか？ これはダメですね。何も考えずそのままUPしていました。 ご指摘ありがとうございます。

その他の回答 (3)

  • yuu_x
  • ベストアンサー率52% (106/202)
回答No.4

少し調べてみたのですが、サーバ側の設定を変更しないと無理みたいですね。 以前書いたコードは忘れてください。ごめんなさい。

dummygo
質問者

お礼

わざわざ調べて頂き感謝いたします。 原因が判明しただけでもとても助かりました。 この度はありがとうございました。

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

同じくソースは見てませんが・・・ cookieの保存、読み出し部分でブラウザによる違いはあまりないように思われますが、どのような事象なのでしょうか？ ちなみに、Slashdot Menuのオリジナル版はもちろん作動していますが、IE6では、ご提示のメニューはどちらも作動していないようです。 Opera8ではメニュー部分そのものが、表示されないみたいです。 cookieではなく、このあたりに原因がありそうでは？ 勘違いをしていたら失礼。

dummygo
質問者

補足

オリジナル版をiframeで表示させてみました。 http://www.rakuten.ne.jp/gold/magicmarket/test.html メニューを閉じて更新すると開いた状態に戻ると思います。 スクリプト自体に不具合があるわけではないのですが、iframe内でもIEで状態を保持する方法があれば使い勝手が向上するのでとても助かります。 方法がなければきっぱり諦めます。よろしくお願い致します。

回答No.1

サイトやソースなどは見ていません。 キャッシュから読んでいたり、ブラウザの戻るボタンや進むボタンを使う場合などの場合、 windowの読み込み完了イベントが発生しないブラウザがあります。 Firefoxはバージョン2か3で発生するように変更されました。 Operaはonloadイベントを発生させない代わりに、初期化後の変数の値まで全てを保存していると思います。 それへの簡単な対処法で、 </body>の直前で<script>タグを使って、直接呼び出す方法があります。 <body onload="init();"><!-- これは呼び出されない --> ..... <script type="text/javascript"> init(); // これは呼び出される </script> </body> ご参考まで。

dummygo
質問者

補足

ご回答ありがとうございます。 状態の保持はcookieのキャッシュを利用しているのですが、iframeを使用しない場合は正常に動作しますので、ブラウザの読み込み自体は問題ないと考えられます。 よろしくお願い致します。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • iframe内リンクをiframe外に表示する方法

    楽天のショップでiframeを使ってページ作成をしようと思っているのですが、 iframe内にリンクを貼るとiframeの中だけでリンク先に飛ばれて、iframeの外側には反映されません。 iframeの中の<iframe src="http://www.rakuten.ne.jp/gold/●●.html" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" width="980" height="280"> この中のhtmlには<base target="_top">としているのですが、それでも全体のページには反映されず ifame内だけで展開してしまいます。 通常であればこれで問題ないと思うのですが、楽天の中だと規制がかかり失敗してしまいます。 素人でお見苦しい点もあると思うのですが、よろしくお願いします。 ちなみに参考にしているページはこちらになります。 http://www.rakuten.co.jp/cocoa/ よろしくお願いします。

    • ベストアンサー
    • HTML
  • iframeに横スクロールを出現させない方法（IE６）

    いつもお世話になっております。 今回は、IE６でiframeの横スクロールバーを出現させない方法がわからずこちらで質問させていただきました。 TOPページにindex.htmlを置いており、indexにiframeを3つ(top.html/menu.html/main.html)作成し、ページを作っております。 top/mainの2箇所に問題は無く、menuの部分での質問です。 iframeは幅200pxで設定しており、その中に幅指定100%のmanu.htmlをiframe src=""で埋め込んでいます。 menu.htmlには幅200pxで作成した背景画像(no-repeat)と、幅100%指定のiframeを使用しております。 menu.htmlに対しCSSで overflow: auto;を当てていますが、スクロール表示しないといけない状態に画面を変更した場合横スクロールが消えない状態です。（IE７ではきえるのですが…） IE6の特徴の、文章等がある場合親のサイズに合わすことが要因だと思いますが、iframe/menu.htmlのサイズを変更させず横スクロールを表示させないことは可能でしょうか？（menu.htmlを180px固定とか、index.htmlのiframeをscroll="yes"にすれば平気ですが、不恰好になるので…） よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 複数のiframeの表示場所が勝手に変わります。

    こんにちは、iframeの表示に関しての質問です。 1ページに7つのiframeで表示させていますが、 頻繁にiframeの表示エラーが起こります。 そのエラーというのは、iframe内で同じページが2箇所表示されるというものです。 ※（menu01.htmlとmenu02.htmlを横2列にiframeで表示されているとして、menu01.htmlが2列とも表示されてしまう、という感じです。） もちろんそれぞれのiframe内にはそれぞれ別のページが表示されるよう設定しているのですが、 ブラウザを立ち上げたり、ブラウザの戻るボタンを押すとこのようなエラーが起きてしまいます。 更新ボタンを押すと、正常に表示されるのですが。。 ↓実際に使っているiframeのタグです↓ <iframe width="122" height="7320" src="URL" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" name="menu01" title="menu01">&nbsp;</iframe> （titleは余分かもしれないですが、 nameやtitleをiframeごとに名前を変えることで 直らないかなぁ、、と試行錯誤した名残です。。） ブラウザの問題なんでしょうか？ ちなみに、IE6とIE7とfirefox5で動作確認していますが、 IE7が特にひどいです。firefoxでは正常に表示されていますが、 コーディング中にオフラインで表示させると、同じようなエラーが起こります。 同じ経験をされた方、解決方法がおわかりになる方、 いらっしゃいましたら、アドバイスお願いします！！

  • iframeクッキー2

    すみません。解決したと思っていたのに後で確認したところ、出来ていませんでした。 一度削除したのに、またこうやって立てて、申し訳ないです。 何度も試行錯誤しましたがまったくうまくいかなかったので質問させて頂きます。 testページではできたのですが、index.htmlの方にするとうまくいきません。 タグをおいておきます。 ************************* index.htmlの基本とiframe ************************* <html> <head> <title></title> <META>（3行、METAタグをおいています） <link rel="stylesheet" type="text/css" href="/standard.css"> <script language="JavaScript" src="/standard.js"></script> <script> function GetHeightForIndex(){ GetHeight("iframeのID"); } </script> </head> <body onLoad="Clock(),Ref()"> <table ～～～ ～～～ <td valign=top width=87% rowspan=2> <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にあたるページアド'; （/inde.html　なら、　/フォルダ名/a.html　のファイルの位置にあります） document.write('<iframe class=tmain src="',file,'" id="iframeのid" name="iframeの名前" frameborder="0" scrolling="no" height="1500"></iframe>') function setCook(arg){ document.cookie = cook_key + '=' + arg + ';'; } </script> <noscript> <iframe class=tmain src=.htmlにあたるページアド id="iframeのid" name="iframeの名前" frameborder=0 scrolling=no height=1500></iframe> </noscript> </td></tr> </table> </body> </html> ************************* index.htmlのリンク ************************* <a href=c.htmlにあたるページ onclick="setCook(this.href)">掲示板</a> </td><td class=white width=1> <div id="line"></div> </td><td class=white><center> <a href=d.htmlにあたるページ onclick="setCook(this.href)">チャット</a> a.htmlはテーブルリンクを使用しています。 <table　～～～ <td onClick="tmain.location.href='a.htmlにあたるページ',setCook(this.href)" STYLE="cursor:hand;"> ************************* standard.js ************************* 時計や更新日、iframeの高さ可変など～～～ //iframeクッキー var cook_key = "iframesrc"; /* クッキーのキーになる適当な名前 */ window.onload = function(){ if(cook_src) document.getElementById('iframeのID').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('iframeのID'').src = cook_src ? (cook_src[1] ? cook_src[1] : 'a.htmlにあたるページアド') : 'a.htmlにあたるページアド'; } function setCook(arg){ document.cookie = cook_key + '=' + arg + ';'; } こういう状態なのですがうまく機能されません。 この状態だと、 最初に表示されるa.html　　× （表示されない。404になる。） b.thmlの表示と更新しても同じように表示される（クッキー有）　○ c.htmlやd.htmlなど、表示　○ 　↑の状態でを更新をおす。　× 　（a.htmlの最初に表示するときと同じように404） a.htmlのリンクを押す。（a.htmlが表示される）　○ document.write('<iframe class=tmain src="',file,'" id="iframeのid" name="iframeの名前" frameborder="0" scrolling="no" height="1500"></iframe>') の ',file,'の部分をa.htmlにあたるページに直すと、 最初に表示されるa.html、c.htmlとd.htmlを更新した際、共にa.htmlが正常に表示されたので、出来たのかと思ったのですが、 b.htmlで更新を押すと、クッキーが無になり、a.htmlが表示されるようになる。 何度もすみませんが、うまくいかず、困ったので教えてください。 P.S.　　b.htmlのようなページを複数にする場合には、 リンクの　onclick="setCook(this.href)"　をb.htmlのようにしたいページのリンク(aタグ)に入れればいいですよね？

  • HTMLのIFRAMEについて教えて

    HTMLのIFRAMEについて教えて欲しいのですが、 例えば、cgiの入力項目で、数字の１を入力した場合、aaa.htmlというページ内にあるIFRAMEで囲まれた エリア内に、１の写真が表示できるようにしたいのです。 現在、以下のような記述をしているのですが、IFRAMEの部分がエラーになってしまうのです。(>_<) noには、数字の変数が入っています。 他の方法でも結構なのですが、数字によってIFRAME内に表示される写真を変えたいのです。 どなたか、宜しくおねがいします。 <script type="text/javascript"> <!-- switch(no){ case 0: id = "01.jpg"; break; case 1: id = "02.jpg"; break; case 2: id = "03.jpg"; break; default : id = "00.jpg"; break; } // --> </script> <iframe src="id" name="picture" width="300" height="300"></iframe>

    • ベストアンサー
    • HTML
  • iframeクッキー　あと少しで

    またしても立ててしまいました。 自分の力ではどうしようも出来ないので、立てたことお許しください。 index.htmlのiframeに最初に表示されているページ　a.html index.htmlの<a>タグリンクでiframe内に表示するページの内、 　クッキーによって、更新おしてもiframe内を変えないページ　b.html・c.html 　クッキーを解除し、更新を押すと、a.htmlを表示するページ　d.html・e.html 現在、今までの質問で以下のタグでiframeのクッキーを使用しています。 ************************************************************************** index.html ************************************************************************** <head>内 　<script language="JavaScript" src="/standard.js"></script> 　<script><!-- 　function GetHeightForIndex(){ 　GetHeight("tmain"); 　} 　//--></script>　　これは、iframeの高さ可変のタグです <body>内 　<a href="b.html" onclick="setCook(this.href)">ｂ</a> 　<a href="c.html" onclick="setCook(this.href)">ｃ</a> 　<a href="d.html" onclick="setCook('')">ｄ</a>　 　<a href="e.html" onclick="setCook('')">ｅ</a> <script type="text/javascript"><!-- var cook_key = "iframesrc"; if(cook_src) document.getElementById('iframe名').src = 'a.html'; 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 class="tmain" src="',file,'" id="iframeID" name="iframe名" frameborder="0" scrolling="no" height="1500"></iframe>') document.getElementById('tmain').src = cook_src ? (cook_src[1] ? cook_src[1] : 'a.html') : 'a.html'; function setCook(arg){ document.cookie = cook_key + '=' + arg + ';'; } //--></script> <noscript> <iframe class="tmain" src="a.html" id="iframeId" name="iframe名" frameborder="0" scrolling="no" height="1500"></iframe> </noscript> ************************************************************************** standard.js ************************************************************************** //iframe高さ可変 function getIFrameDocument(aID){ if (document.getElementById(aID).contentDocument){ return document.getElementById(aID).contentDocument; } else { return document.frames[aID].document; } } function GetHeight(ID){ if (document.height) { document.getElementById(ID).style.height = getIFrameDocument(ID).height +20 +"px" ; }else{ document.getElementById(ID).style.height = getIFrameDocument(ID).body.scrollHeight +20 +"px"; } } //iframeクッキー var cook_key = "iframesrc"; window.onload = function(){ } function setCook(arg){ document.cookie = cook_key + '=' + arg + ';'; } user_pref("dom.disable_window_open_feature.scrollbars", true); ************************************************************************** この状態で現在、困っているのは 　a.htmlを表示している状態で更新を押すと、iframe内が404になることです。 b.htmlなどで更新を押すと、b.htmlが表示されたままだし、 d.htmlなどで更新を押すと、a.htmlが表示されます。 解決方法教えてくださいっ。

  • iframeのheight可変方法について教えてください

    iframeのheight　自動可変　についてのjavascriptはたくさん書き込みがありますが、親ページの<head>～</head>内にscriptの書き込みは不可の場合に実現可能かお教えください。（楽天サイトのため） 【親ページ】 <html> <body> <iframe src="hoge.html（子ページ）" width="900px" height="●●"> </body> </html> 【子ページ】 <head>内など自由に書き込み可能 ●●部分を可変にしたいのですが可能でしょうか？ 可能な場合、実際のソースもお教えいただければ幸いです。 宜しくお願いいたします。

  • cookieの最大数

    入力項目が50個程度のフォームページを作成しています。 データが送信された際に送信データのチェックを行っていて、問題がある場合はエラーページを出力して入力ページに戻るようにしています。 通常は「戻る」ボタンを押すなどして前のページに戻った場合には、フォームに入力された値は保持されているはずなのですが、フレームを利用しているためか、入力ページに戻るとフォームに記入されていた値が全て消えてしまいます。 この状態を回避するために、入力された値を全てcookieに格納し、入力フォームのページで読み込んで表示するようにしました。が、数が多いためか、cookieに格納される値と格納されない値ができてしまいました。 ここで質問なのですが ・cookieに格納する値には数的制限があるのか ・制限があるとすれば、最大数を増やすことは可能か ・cookie以外にフォームの値を保持する方法はあるか 解りづらい点があるかと思いますが、ご回答の程よろしくお願いします。

    • ベストアンサー
    • PHP
  • MovableTypeでロールオーバー保持

    現在、MovableTypeでグローバルメニューのモジュールを作成しております。 普通にロールオーバーはできるのですが、リンク先のページに遷移された時のボタンのロールオーバー保持ができません。 javascriptの使用は、したくないです。 MTのタグ＋CSSでどうにかならないでしょうか。 MT4.2を使用しております。

  • iframeのターゲットの設定がうまくいかないので…教えてください。

    こんにちは。はじめまして、Alfaといいます。 ホームページを作成中、どうしてもうまくいかないことがあり、質問させていただきました。 早速ですが、 （１） main.htmlの中にiframeがあり、 main.htmlを開くとまず、a.htmlというものが表示されます。 （２） main.htmlの中のメニューボタンBを押すと、iframe内にb.htmlが表示されます。 （３） ページＣ（iframeなしの、全く違うページ）から B.htmlを表示させるように＜リンク＞をはりましたが、思い通りに動作しません。 <a href="main.html" onClick="parent.target.location.href='b.html'">リンク</a> と書いたのですが、main.htmlは開くのですが、a.htmlが表示されてしまいます。 b.htmlを開くためには、どうすればよいのでしょうか…。 どなたか教えてください。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する