- ベストアンサー
自身のページとiframeの2つのページを同時更新する方法
いつもありがとうございます。初心者です。御指導お願いします。 テキストにリンクを貼って、クリックと同時にiframeの2ヶ所のページにGETでデータが送信され、同じ値がGETで自身のページにも送信され 自身とiframeの3つのページが同時に更新されるようにしたいのですが、下記の記述では、GETで送信されて、iframe内のページは更新されるのですが、自身のページは更新ボタンを押さないと内容が更新されません。 テキストリンクをクリックしただけで、自身のページとiframe内の2つのページを同時更新できる方法を教えて下さい。 <SCRIPT language="JavaScript"> function Syncro(mPage,cPage,sPage){ parent.main.location.href=mPage; parent.control.location.href=cPage; self.location.href=sPage; } </SCRIPT> phpで書いたページ内のテキストリンクです。 <A HREF="Javascript:Syncro('right.php?entry_day=2008-02-04','top.php?entry_day=2008-02-04','offer_calender.php?entry_day=2008-02-04')">2008-02-04</a> phpで書いたページ内のiframe のページ <td bgcolor="#999999"><iframe src="right.php?entry_day=2008-02-04" name="main" width="300" height="330" scrolling="yes"></iframe></td> <td bgcolor="#3399CC"><iframe src="top.php?entry_day=2008-02-04" name="control" width="677" height="330" scrolling="yes"></iframe></td>
- nicolemen
- お礼率79% (34/43)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
昨日読んで他のフレームの事じゃないと成り立たない話なので あれ？って思っていましたが >offer_calender.php で >その中のiframe のリンク先に >riht.php >top.php >を指定しております。 これで アンカーがクリックされたら offer_calender.php を offer_calender.php?entry_day=2008-02-04 と言う呼び出しを行うのですよね？ offer_calender.php?entry_day=2008-02-04が呼ばれた時点で 前の処理のJavaScriptでのlocation指定は全く無意味です。 ２つのiframeはoffer_calender.phpごと消滅しますから。 JavaScriptは一切不要ですよ。 アンカーを <A HREF="offer_calender.php?entry_day=2008-02-04">2008-02-04</a> offer_calender.php のPHPで、受け取ったデータからiframeのsrcを指定変更。 無処理で単純に書けば、iframeのHTML部分は <iframe src="right.php?<?=$_SERVER['QUERY_STRING']?>"></iframe> <iframe src="top.php?<?=$_SERVER['QUERY_STRING']?>"></iframe> これで目的は果たせます。 ってのが #1さん が書いてる事だと思いますよ。
その他の回答 (1)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
self.location.hrefを変更した時点でその中にあるインラインフレームは消滅します。 offer_calendar.phpが出力するHTMLの中で、 <iframe src="right.php?entry_day=2008-02-04"></iframe> <iframe src="top.php?entry_day=2008-02-04"></iframe> を入れれば良いと思います。
補足
ご返事遅くなりました。ご解答ありがとうございます。 記述の補足を致します。 phpで書いているページと言うのは、 offer_calender.php で その中のiframe のリンク先に riht.php top.php を指定しております。 そこでoffer_calender.php内の日付を変更した際に rigth.phpとtop.php への日付の更新は出来たのですが、 offer_calender.php内での日付からoffer_calender.php内の 他のデータの内容を更新したいのですが、変更できません。 どうぞよろしくお願いします。
関連するQ&A
- iframeから別のiframeを自身ページと同時更新 javascript
お世話になります。web初心者です、宜しくお願い致します。 index.html内に２つのiframe main.html・top.htmlがあります。 iframe・main.htmlのlinkをクリックしたとき、自身ページをmain_b.htmlに更新すると同時に、index.html内のtop.htmlをtop_b.htmlへと更新し、さらに更新された時にindex.htmlのページの上部へと移動(main.htmlのlinkがページ下方でmain_b.htmlへ更新されたときに位置が下過ぎてページが見にくい)するにはどのようにしたら良いのでしょうか？ かなり訳が分からずにまいってしまっています、、 どなたか宜しくお願い致します。
- 締切済み
- ネットトラブル
- IFRAMEからのリンク先
お世話になります。 現在開いているページにIFRAMEがあります。 IFRAMEの中のページにSELECTのプルダウンメニューがあります。 そのプルダウンメニューからONCHANGEでリンクするのですが、その リンク先ページを現在開いている親の画面とは別の画面に出したい のです。テキストリンクだとtarget="_blank"でできるのですが、 SELECTだとどうしても親画面と差し替えになってしまいます。 やってみたコードは parent.location.href="[オプションのVALUE]"; なのですが、これでうまく行きません。 どうすれば、別画面でリンクできるのでしょうか。 よろしくお願いいたします。
- 締切済み
- JavaScript
- 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タグ)に入れればいいですよね？
- 締切済み
- JavaScript
- <iframe>内にHTMLをランダム表示するには？続きです。
先日の<iframe>内にHTMLをランダム表示するには？の続きなのですが、 http://questionbox.msn.co.jp/qa2962976.htmlの疑問は 皆様のお力で解決しました。 誠にありがとうございました。 もう一つ教えて頂きたいことがあるのですが、 かなりの素人なので説明不足など分かりづらいところが多々あると思いますが、 何卒宜しくお願い致します。 同じhtmlに複数のiframeを配置し、 各iframeをランダムにしたいのです。 その際、各iframeは別々のフォルダーに収納されているhtmlを 表示するようにしたいです。 例えば、同じhtmlに iframe１、iframe２、iframe３があるとし、 ０１、０２、０３という３つのフォルダーの中に ０１.html、０２.html、０３.htmlがそれぞれ収納されているとした場合、 iframe１は01のフォルダーの中のhtmlをランダムで表示し、 iframe２は02のフォルダーの中のhtmlをランダムで、 iframe3は03のフォルダーの中のhtmlをランダムで、 といったランダム表示にしたいです。 あまりの素人なので全く分かりませんので、 大変申し訳ありませんが、 多少いじってコピペするくらいまで完成されたソースを教えて頂けますでしょうか？ 宜しくお願い致します。 ------------------------------------------------------------------------- 以下のソースは、 ３つのiframeに同じフォルダー内のhtmlをランダムで表示させることができたソースです。 教えてもらいました。 こちらは参考までに載せました。_ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title></title> <script type="text/javascript"> <!-- function RndmSubFlame(){ rlURL= new Array(); rlURL[0]="01.html" rlURL[1]="02.html" rlURL[2]="03.html" n=rlURL.length; x1=Math.floor(Math.random()*n); x2=Math.floor(Math.random()*n); x3=Math.floor(Math.random()*n); s01.location.href = rlURL[x1]; s02.location.href = rlURL[x2]; s03.location.href = rlURL[x3]; } //--> </script> </head> <body onload="RndmSubFlame()"> <table border="1" width="84%" height="87"> <tr> <td width="33%" height="81"><iframe src="a01.html" frameborder="0" width="100%" height="190" name="s01" scrolling="no"></iframe></td> <td width="33%" height="81"><iframe src="a01.html" frameborder="0" width="100%" height="190" name="s02" scrolling="no"></iframe></td> <td width="34%" height="81"><iframe src="a01.html" frameborder="0" width="100%" height="190" name="s03" scrolling="no"></iframe></td> </tr> </table> </body> </html> ------------------------------------------------------------------------- 以下のhtmlソースに書き加えてもらえると大変助かります。 何卒、宜しくお願い致します。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title></title> </head> <body> <table border="1" width="45%" height="448"> <tr> <td width="46%" height="210"><iframe src="01/01.html" frameborder="0" width="100%" height="190" name="01" scrolling="no"></iframe></td> <td width="54%" height="442" rowspan="2"><iframe src="03/01.html" frameborder="0" width="100%" height="190" name="03" scrolling="no"></iframe></td> </tr> <tr> <td width="46%" height="226"><iframe src="02/01.html" frameborder="0" width="100%" height="190" name="02" scrolling="no"></iframe></td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
- Iframeとして呼び出すページを120ｐｘ以下を表示したい
Iframeを使いたいのですが、A.htmlの高さ120pixから下をIframeで指定したいときはどうしたらいいでしょうか。 <html> <head> <title>testtitle> </head> <body> <div width:100%; height:120px;> <table> <tr> <td><iframe src="A.htm" width="100%" height="100%" frameborder="0" scrolling="no" overflow:no></iframe><td> </tr> </table> </div> </body> </html> 呼び出すIframeの中身のページについて 高さを120pix以下を表示したいのですが。 よろしくおねがします。
- 締切済み
- JavaScript
- <iframe>内にHTMLをランダム表示するには？
かなりの素人なので説明不足などで分かりづらいところが多々あると思いますが、 何卒宜しくお願い致します。 同じhtmlに複数のiframeがあるのですが、 その全てのiframeをランダムにしたいのですが、 あまりの素人なので全く分かりません。 申し訳ありませんが、 多少いじってコピペするくらいまでのソースを教えて頂けますでしょうか？ 宜しくお願い致します。 iframe一つだけのランダムは以下のソースでできました。 <head> <script type="text/javascript"> <!-- function RndmSubFlame(){ rlURL= new Array(); rlURL[0]="01.html" rlURL[1]="02.html" rlURL[2]="03.html" n=rlURL.length; x=Math.floor(Math.random()*n); sub_flame.location.href = rlURL[x]; } //--> </script> </head> <body TopMargin=0 LeftMargin=0 RightMargin=0 BottomMargin=0 STYLE="overflow:auto;height:100%;" onLoad="RndmOpen()"> <script><!-- document.write("<iframe src=\""+riURL[x]+"\"></iframe>"); //--> </body> 以下のhtmlのようなページです。 できましたら、このソースに書き加え頂けますと 大変助かります。 宜しくお願い致します。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title></title> </head> <body> <table border="1" width="84%" height="87"> <tr> <td width="33%" height="81"><iframe src="a01.html" frameborder="0" width="100%" height="190" name="01" scrolling="no"></iframe></td> <td width="33%" height="81"><iframe src="a01.html" frameborder="0" width="100%" height="190" name="02" scrolling="no"></iframe></td> <td width="34%" height="81"><iframe src="a01.html" frameborder="0" width="100%" height="190" name="03" scrolling="no"></iframe></td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
- <iframe>で読み込むページの高さを自動取得して、heigthに代入
一つ大きなフレームを <iframe name="disp" src = "" height=1000 width=1000 frameborder=0 scrolling=auto></iframe> とおいて、同一ページ内から<a href="test.html" target=disp> として、test.htmlが空白ページの<iframe>内に表示させるようにしたいのですがその都度、読み込むページの高さを自動取得して、heightとして自動的に適切な高さに変換するということはできいないでしょうか？
- ベストアンサー
- HTML
- iframeの中でページ内リンクはできますか？
iframeを使って下記のようなつくりでHTMLを組んでみましたが、Chromeでリンクに飛ぶことができません。（(1)をクリックすると(2)の位置に飛んでほしい） = A.html = <html> <body> <iframe src="B.html" scrolling="no" frameborder="0" width="750" height="2000"></iframe> </body> </html> = B.html = <html> <body> <a href="#CCC"><img src="xxx.jpg" /></a>…(1) ・ ・ ・ <a href="C.html" name="CCC">あいうえお </a>…(2) </body> </html> ざっくりと書いてしまいましたが、親HTML（ここでいうA.html）では指示をせず、あくまでiframe中の子HTML（ここでいうB.html）の中でページ内リンクをしたいと思っています。 ちなみにiframeを使っていますが、ブラウザ上の見え方としては、A.htmlに1ページで組んでいるかのような形にしたいと思っています。 ネットでいろいろ調べてみましたがよくわからず、記述が悪いのか、Chromeではうまくいかないのか、悩んでおります。（Sarfari等、うまくいったブラウザもあるのですが…） よい方法がございましたら教えてください。 宜しくお願いします。
- 締切済み
- HTML
- jQuery POST送信後のページ更新
いつもお世話になっております。 jQuery+PHPにて、POST送信し、 戻り値の条件分岐でページを遷移させたり、 更新させたいと思っています。 ご教授願えないでしょうか。 index.php内 [ソース] $.POST('./search.php', {'code':12345'}, function(data){ if(data['type'] == '1'){ alert('見つかりません') location.href='./index.php'; } else if(data['type'] == '2'){ location.href='./edit.php; }, 'json' ); 見つかりませんのアラートを表示した後、 location.hrefだと、リロードする事なく。 またlocation.reloadにしても同様です。 $.POST外でlocation.reloadを指定すると リロードしてくれるのですが、$,POST送信してくれません。 もし不可能であれば、location.hrefで別のファイルを経由させて実施しようと思っています。 宜しくお願いします。
- ベストアンサー
- AJAX
- 単独で開かれたiframeを親ページに表示したい
ブログ記事(blog1.html、blog2.html、blog3.html)を親ページ(index.html)のiframeとして表示しています。 親ページを開いた際には、デフォルトで最も新しいブログblog3.htmlが表示されるようになっています。 ブログ記事が単独で開かれた場合には、 if (window == window.parent) { location.href = "./index.html"; により自動的に親ページに導くようにしていますが、その際に開かれたブログ記事を表示したいと思います。 当たり前ですが、現在はblog3が開かれてしまいます。 どのようにしたらいいでしょうか。 以下、現在確認中のサンプルスクリプトです。 ■親ページ■ <html lang="ja"> <head> <meta charset="UTF-8"> <title>index</title> </head> <body> <p>index.html</p> <iframe src="./blog3.html" frameborder="2" width="300" height="100"></iframe> <div id="result"></div> </body> </html> ■ブログ1■ <html lang="ja"> <head> <meta charset="UTF-8"> <title>blog1</title> </head> <body> <p>blog1.html</p> <script> // 単独で開かれている場合 if (window == window.parent) { location.href = "./index.html"; // iframeで開かれている場合 } else { } </script> </body> </html> ■ブログ3■ <html lang="ja"> <head> <meta charset="UTF-8"> <title>blog3</title> </head> <body> <p>blog3.html</p> <script> // 単独で開かれている場合 if (window == window.parent) { location.href = "./index.html"; // iframeで開かれている場合 } else { } </script> </body> </html>
- ベストアンサー
- JavaScript
お礼
うまく動くことができました。 自分の間違いにも気付きました。 どうも御指導ありがとうございました。
補足
ありがとうございます。 GETでデータとしては受渡しがうまく行くのですが、 受渡しの日付の日のテーブルの指定日の <td bgcolor-"#990000">日付</td> の背景色を変えようとするのですが、日付は変われど 背景色は、更新ボタンを押さないと分かりません。 どうしてなのでしょう？