- ベストアンサー
別ページのインラインフレームのアンカーに移動させる方法
はじめまして、勉強になります。色々調べてやってみたのですがどうしてもうまく動作してくれません。 やりたい内容は、あるページから同一ドメイン内のあるページに飛ばした時にアンカー情報（#～）付きで渡して、渡したページ先のインラインフレーム内のアンカーに移動させたいのです。 下のソースでstr変数がうまく渡っていないのか、受け取り側のスクリプトがまずいのかが分かりません。（ちなみに途中で変数をモニターする方法があるのでしょうか？） 一応次のページのURLバーには?以降のアンカー情報付きで表示されてはいるのですが、その?以降のアンカー情報がインラインフレームのURLに渡っていないような状態です。 以下省略ソースです。 【送信元】 <SCRIPT Language="JavaScript"> <!-- html1 = "飛ばす先.htm"; function watasu(str){ location.href = html1 + "?"+ str; } //--> </SCRIPT> </head> <body ～ <img src="画像.jpg" onClick="watasu('#2')"> 【受信側 親ページ】 <script language="JavaScript" type="text/javascript"> <!-- url1 = "liveevent_test.htm"; function jump2(){ url2 = "読み込むインラインフレーム.html"; str = location.search.substr(1,location.search.length-1); top.インラインフレーム名.location.href = url2+str; //top.インラインフレーム名.location.hash = #アンカー; <--ちなみにこの一行を上の一行と差し替えたら動きました。ですがここは前ページからの変数渡しにしたいのです。 } // --> </SCRIPT> <body ～ onLoad="jump2()">～ <IFRAME SRC="読み込むページ.html" name="インラインフレーム名" >～</IFRAME> どなたかヒントでもいいのでお力添えください…もしかして根本的なやり方がまずいのでしょうか。 よろしくお願いいたします。
- kdx500
- お礼率100% (4/4)
- JavaScript
- 回答数4
- ありがとう数9
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
何度もすみません。 読解力無さすぎですね。おれ。 ・a.html ・b.html ・ifame.html -- a.html -- <html> <head> </head> <body> a.htmlです。 <div> <span><a href="#" onclick="location.href('./b.html?a');">aへ</a></span> <span><a href="#" onclick="location.href('./b.html?b');">bへ</a></span> <span><a href="#" onclick="location.href('./b.html?c');">cへ</a></span> <span><a href="#" onclick="location.href('./b.html?d');">dへ</a></span> <span><a href="#" onclick="location.href('./b.html?e');">eへ</a></span> <span><a href="#" onclick="location.href('./b.html?f');">fへ</a></span> </div> </body> </html> -- b.html -- <html> <head> <script> function hoge(){ hoge = location.search.substring(1); url = './iframe.html#' + hoge; window.open(url, 'iframe_area'); } </script> </head> <body onload="hoge();"> b.htmlです。 <iframe name="iframe_area" style="width:100%;height:50%"> </body> </html> iframe.htmlは、#2と同じ。
その他の回答 (3)
- kappa_neko
- ベストアンサー率50% (14/28)
a.htmlとb.htmlはフレーム分けされているのですか? こんな感じで。 ・parent.html（フレーム定義をするhtml） ・a.html（上フレームに表示される） ・b.html（下フレームに表示される） ・ifame.html（b.html内でiframeに表示される） -- parent.html -- <html> <frameset rows="60px,*"> <frame name="control_frame" src="./a.html"/> <frame name="body_frame" src="./b.html"/> </frameset> </html> -- a.html -- <html> <head> </head> <body> a.htmlです。 <div> <span><a href="./iframe.html#a" target="iframe_area">aへ</a></span> <span><a href="./iframe.html#b" target="iframe_area">bへ</a></span> <span><a href="./iframe.html#c" target="iframe_area">cへ</a></span> <span><a href="./iframe.html#d" target="iframe_area">dへ</a></span> <span><a href="./iframe.html#e" target="iframe_area">eへ</a></span> <span><a href="./iframe.html#f" target="iframe_area">fへ</a></span> </div> </body> </html> -- b.html -- <html> <head> </head> <body> b.htmlです。 <iframe name="iframe_area" style="width:100%;height:50%"> </body> </html> iframe.htmlは、#2と同じ。
お礼
度々ありがとうございます。 a.htmlとb.htmlはフレーム分けではなく、全くの別ページなので、a.htmlから直接target属性でiframeのnameを指定するとiframe.htmlが全画面で表示されてしまいます。 やりたいのはこのときに、b.html内のiframeのアンカーポイントに移動させたいのです。 ＜イメージ図＞ ■a.html─■b.html └iframe.html ※a.htmlに<a href="./iframe.html#a"～など表記してます うまく説明できてないかもしれません。すみません。とにかくありがとうございます。
- kappa_neko
- ベストアンサー率50% (14/28)
やりたいのは、こういうことですか？ 2つのhtmlファイルを作ってください。 ・main.html ・iframe.html です。 -- main.html -- <html> <head> </head> <body> <div> <span><a href="./iframe.html#a" target="iframe_area">aへ</a></span> <span><a href="./iframe.html#b" target="iframe_area">bへ</a></span> <span><a href="./iframe.html#c" target="iframe_area">cへ</a></span> <span><a href="./iframe.html#d" target="iframe_area">dへ</a></span> <span><a href="./iframe.html#e" target="iframe_area">eへ</a></span> <span><a href="./iframe.html#f" target="iframe_area">fへ</a></span> </div> <iframe name="iframe_area" style="width:100%;height:50%"> </body> </html> -- iframe.html -- <html> <head> <style> tr{ height : 100px; } </style> </head> <body> <table> <tr><td style="background:red;"><a name="a">aです。</a></td></tr> <tr><td style="background:blue;"><a name="b">bです。</a></td></tr> <tr><td style="background:red;"><a name="c">cです。</a></td></tr> <tr><td style="background:blue;"><a name="d">dです。</a></td></tr> <tr><td style="background:red;"><a name="e">eです。</a></td></tr> <tr><td style="background:blue;"><a name="f">fです。</a></td></tr> </table> </body> </html>
お礼
回答ありがとうございます。試してみます。 私の説明が分かりずらいからかもしれないのですが、やりたいことがうまく伝わっていない可能性がありますので補足させていただきます。 A.html と b.htmlがあり、b.htmlの中でインラインフレームiframe.htmlを読み込んでいます。で、a.htmlのリンクに<a href="iframe.html#アンカー>と表記したのですが、アンカーポイントに飛びませんでした。b.htmlから<a href="iframe.html#アンカー>と書けば何も問題ないかとは思うのですが、どうしてもa.htmlから飛ばす必要がありますので、#アンカー部分を変数にしてb.html、iframe.htmlに渡せないかなと考えた次第です。 ご参考までに具体的なサイトのurlを貼っておきます。 http://www.leilandgrow.com/leilandgrow/index_js_test.htm ここのindex.htmからliveevent.htmに飛ばし、cgiで生成したiframe内のアンカーポイント"#2"に飛ばしたいのです。よろしくお願いいたします。
- argi
- ベストアンサー率27% (5/18)
単純にHTMLだけで以下の感じでやったらいけました。 --全体ページ(abc.html)-------------- <html> <body> aaaa<br> <IFRAME SRC="bbb.html#tobu"></IFRAME><br> bbbb<br> </body> </html> --IFRAMEページ(bbb.html)-------------- <html> <body> aaa<br> bbb<br> ccc<br> ddd<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br id="tobu"> kokonitobu?<br> <br> <br> <br> </body> </html> abc.htmlを開くとkokonitobu?の箇所に飛ぶはずです。 ただ、インナーフレーム自体あまり推奨されてなかったと記憶していますが。
お礼
回答ありがとうございます。できればhtmlのみでやりたいので試してみます。 私の説明が分かりずらいからかもしれないのですが、やりたいことがうまく伝わっていない可能性がありますので補足させていただきます。 A.html と b.htmlがあり、b.htmlの中でインラインフレームiframe.htmlを読み込んでいます。で、a.htmlのリンクに<a href="iframe.html#アンカー>と表記したのですが、アンカーポイントに飛びませんでした。b.htmlから<a href="iframe.html#アンカー>と書けば何も問題ないかとは思うのですが、どうしてもa.htmlから飛ばす必要がありますので、#アンカー部分を変数にしてb.html、iframe.htmlに渡せないかなと考えた次第です。 ご参考までに具体的なサイトのurlを貼っておきます。 http://www.leilandgrow.com/leilandgrow/index.htm ここのindex.htmからliveevent.htmに飛ばし、cgiで生成したiframe内のアンカーポイント"#2"に飛ばしたいのです。よろしくお願いいたします。
補足
すいませんURL間違えました。 http://www.leilandgrow.com/leilandgrow/index_js_test.htm
関連するQ&A
- インラインフレームがときどき表示されない
別窓を開くと、別窓内のインラインフレームが表示されるときとされないときがあります。 プログラムは以下のようにしました。 ・メインファイル <script language="javascript"> <!-- var subWin = null; function disp(nValue){ subWin = window.open("別窓ファイル名",""); subWin.menu.location.href = "2003" + nValue + "menu.html";} //--> </script> <body> <a href="JavaScript:disp('01');"> <img src="img1.jpg"> </a> <a href="JavaScript:disp('10');"> <img src="img10.jpg"> </a> </body> ・別窓のファイル <IFRAME src="" id="menu"> </IFRAME> エラーメッセージは以下のようにでます。 『subWin.menu.locationはNullまたはオブジェクトではありません。』 プログラムに間違いがあればご指摘お願いします。
- ベストアンサー
- JavaScript
- 1クリックで複数のページを開く（片方はインラインフレームに）
現在フレームを使ってサイトを作っています。 左右2分割で、 左側がmenu.html name=left 右側がmain.html name=right 更に左側のページにはインラインフレームがあり、 frame.html name=sita となっています。 左側のインラインフレームの外にあるリンクを一度押すと、右側のフレームとインラインフレームの中で新しくページが開くようにしたいと考えています。 <SCRIPT language="JavaScript"> <!-- function link1() { parent.right.location.href='aaa.html'; parent.sita.location.href='bbb.html'; } --> </SCRIPT> <A href="JavaScript: link1();">リンク</A> （<body>諸々は略しています） このスクリプトを使用するとインラインフレームの部分が普通のフレームの場合は同時に開くことが出来たのですが、sitaをインラインフレームにすると動かなくなりました。 色々と検索してみたのですが答えにたどり着けずお手上げです。 解決方法をご存知の方、どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- designModeをOnにしたインラインフレームに入力した文字を取得
Webページ上にインラインフレームを定義して、その中身のdesignModeをOnにして、インラインフレームのBODYを編集できるようにしています。 JavaScriptで編集したBODYの中身の文字列を取り出したいのですが、方法が分かりません。アドバイスをお願いします。 ソースは↓のような感じにしています。 ----- <html> <body> <iframe src="" id="edit" width="200" height="200"></iframe> <script language=JavaScript> <!-- frames[0].document.designMode = "On"; // --> </script> <br> <input type="button" onclick="JavaScript:DispEdit();" value="中身表示"> <script language=JavaScript> <!-- function DispEdit() { //alert(frames[0].document.body.text); //ここで編集したiframeの中身を取り出したい！ } --> </script> </body> </html> -----
- ベストアンサー
- JavaScript
- フレームで開いたページのリンク抽出
インラインフレーム、フレーム、新規ウィンドウなどでウェブページを開いてリンクを抽出するにはどうしたらよいのでしょうか？ 試した方法は、親ファイルでiframe名.location.href="目的のURL"としインラインフレームでウェブページを開いた後、 http://blog.bulknews.net/mt/archives/001099.htmlのブックマークレットをiframe名.location.href="ブックマークレット"でリンク抽出しようとしたのですが、ブラウザはブックマークレットとして認識してくれず、「ページが表示できません」となってしまいます。 ただ、ウェブページではなくローカルに置いたファイルを開いたのち、同じくiframe名.location.href="ブックマークレット"すると上手く動作してくれるのですが…… ウェブページでもブックマークレットを動作させる方法、あるいは親ファイル内のjavascriptでブックマークレットに相当する動作をするjavascriptの書くなどがあればぜひ教えてください。
- 締切済み
- JavaScript
- 自身のページと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>
- ベストアンサー
- JavaScript
- インラインフレーム内のアンカーに飛ばせますか？
a.html上にname="ai"としてiflameを置き、そこにb.htmlを表示させています。 このb.htmlにはアンカーをいくつかつけており a.html上にあるリンクをクリックすると インラインフレーム内のb.htmlの任意のアンカーポイントへ移動するということをしたいのですが 可能なのでしょうか？ 現在このような書き方なのですが まったく動きません…。 <a href="b.html#b-1" target="ai"><img src="image.gif" width="100" height="16"></a> 教えてください。
- ベストアンサー
- HTML
- 別なページにジャンプさせたい
ボタンをクリックすると指定のページに飛ぶようにしたいのですが、 <html> <head> <script language="JavaScript"> function jump(){ location.href="index.html"; } </script> </head> <body> <form onSubmit="jump()"> <input type="submit"> </form> </body> </html> でも <html> <head> <script language="JavaScript"> function jump(){ location.href="index.html"; } </script> </head> <body> <form> <input type="submit" onClick="jump()"> </form> </body> </html> でも動きません。（そのページを表示したままです） <body onload="jump()">にしたときは正常にジャンプできるので、クリックのイベントが拾えていないと思うのですが、どのように記述すればいいのでしょうか。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- ページ更新後も保持される変数の利用について
初めての質問です。よろしかったらお答えください。 複数のインラインフレーム用ページが用意してあり、 テキストボックスに入力した番号によって 任意のページから10個のインラインフレームを順番に配置するようにしたいのです。 ここを参考に作ったのですがうまくいきません。 http://okwave.jp/qa4019868.html <html> <head> <script language="javascript"> <!-- function init(){ var queries=location.search; if(queries){ var q = queries.replace(/^\?/,'').split('='); n = eval(q[1]); } alert(n); } window.onload= init; // --> </script> </head> <body> <form action="index.htm" method="get"> <input name="number" type="text" value=""> <input type="submit"> </form> <script language="javascript"> <!-- for(i=1 ; i<=10; i++) { document.write("<iframe src='"+n+".htm'>"); n++; } //--> </script> </body> </html> 根本的な所から間違っているのでしょうか？
- ベストアンサー
- JavaScript
- 画像を２つ横に並べる方法と、文字の回りこみの方法又はサイトを案内して下さい
現在、サイドバーのフリーエリアに付けている画像のことで質問します。 これらの画像を２つ横に並べる方法、又は、文字の回りこみの挿入タグの載っているサイトを教えて下さい。 『 <script type="text/javascript" src="○○○.js"></script><script language="JavaScript" src="http://○○jp/flash/<%url>"></script> 』 の横に 『 <a href="リンク先ＵＲＬ"target="_blank"><img src="画像ＵＲＬ" border="0"></a> 』 を並べる方法 と 『 <div &align><iframe allowTransparency="true" frameborder="0" scrolling="no" src="http://○○○.html" name="MainFrame">Iフレームを使用しています。画像が正しく見えない場合はブラウザを代えていただくかなどしてください。<br>「<a href="http://○○jp/">web素材はっぴーフリー</a>」 「<a href="http://○○com/~kmid/">押し花とアイコン</a>」</iframe></div> 』 の横に 『 <script type="text/javascript" src="○○○.js"></script><script language="JavaScript" src="http://○○jp/flash/<%url>"></script> 』 を並べる方法 『 <script type="text/javascript" src="○○○.js"></script><script language="JavaScript" src="http://○○jp/flash/<%url>"></script> 』 の 横への文字の回りこみの方法 ↑ イメージ的には、『 <a href="リンク先ＵＲＬ"target="_blank"><img src="画像ＵＲＬ" border="0" align="left"style="padding:5px;"></a>文字文字文字文字 』のような感じにならないのでしょうか？ これらは可能なのでしょうか？ 可能ならばこれらが載っているサイトを教えて頂きたいのですが、お願いします。
- ベストアンサー
- ブログ
- ここから別窓に・・・・
いつもお世話になっています。 このスクリプトについてです。 <SCRIPT LANGUAGE="JavaScript"> <!-- function kakunin(){ quest=confirm("表示します。\nいいですか？"); if(quest==true){ location.href="http://www.goo.ne.jp/"; }else{ location.href="http://www.goo.ne.jp/"; } } //--> </SCRIPT> 表示されるページを別窓で開くには、どのように書き換えればよいのか教えて下さい。
- ベストアンサー
- JavaScript
お礼
あーーーー出来ました。window.openを使うんですか～！！自分にとっては発想の大転換です。（window.openは別窓を開くのに使うものとばかり思ってました） 出来る人にとっては初歩的な所だと思うのですが、今回は大変勉強になりました。これを機に初歩的なところから勉強しようとつくづく思いました。何度も付き合って頂きありがとうございました。