- 締切済み
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等、うまくいったブラウザもあるのですが…） よい方法がございましたら教えてください。 宜しくお願いします。
- maruko5555
- お礼率0% (0/1)
- HTML
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- metametamu
- ベストアンサー率51% (153/295)
nameの代わりにid="CCC"とすると動いたりしませんか？
関連するQ&A
- iframeにリンクを貼る
<iframe src="qqq.gif" height="1５0" width="356" align="left" frameborder="0" scrolling="no" marginheight="1" name="tv" > この部分はiframe表示です </iframe> にURLを指定してリンクを張りたいのですが、どうしたらいいですか？
- 締切済み
- HTML
- 複数のiframeの読み込みについて
とある事情があり、制限がかなりある中、何とかiframeでやりくりをしていたのですが、 下記の通り（コード、画像参照）ページを組んだところ、 IE11、chrome34.0で確認をしたところ、下記の通り表示がおかしくなってしまいました。 制限が色々あるため、少しイレギュラーなコードの組み方をしており、どこが原因なのかがわからない状態です。 状況などをまとめましたので、お手数おかけいたしますがご教授いただけますでしょうか。 ■■■ページの概要について 恐らく下記のコードと添付の画像を見ていただいた方がわかりやすいと思いますが、制限や概要を記述しておきます。 ・表示させる方のページをA.html（親ページ）、iframe内で読み込むページをB.html（子フレーム）とします。 ・親ページの方にはかなり使用できるタグなどに制限があり、javascriptが使用できません。文字数にも制限があります（子フレームの方は自由です。） ・親ページも子フレームも触れるものの、この2ページは別ドメインです。（下記の例は相対パスで記述しています） ・子フレームの内容は、下記の例では内容が少ないですが、実際にはかなり長いページになります。ただ、ページは分けない方向でお願いします。 ・iframeはスクロールが出ないように高さを調節しています。 ・ページ内リンクを使用したいのですが、iframe内だけではなく、親ページから見た状態でページの途中に飛ばしたいため、 親ページの方にページ内リンク用のアンカーをつけ、複数のiframeで子フレームの内容を表示させています。 ・子フレームのコンテンツ毎にiframe表示用のアンカーをつけ、親ページで細かくiframeを分けて表示させています。 ・（ページ内リンクは親ページの方に記述することも出来ます。） ちなみに過去に次のような記事を見つけましたが、どちらも試すこともできない状態です。 http://okwave.jp/qa/q1105662.html http://okwave.jp/qa/q2938546.html ■■■表示のエラーについて（サーバ上でも、ローカルでも同じような状態です。） ・ページを読み込むと、一番上ではなく、一番下のiframeのところで止まります。 （⇒ページが読み込むと同時に一番上に行ってほしいです。） ・ページ内リンクを付けていますが、リンクを押しても該当のヶ所に飛ばず、 読み込むように少しページがぶれるのですが、元の位置のままです。 ・IE11のみですが、リンクで使用している画像がぼやけて表示されます。 （外部CSSで文字の背景に設定しています。） ■■■コードについて ◆A.html（親ページ） ※JSは使用不可です。 ※<body>は触れません。 ※B.htmlのページとは別ドメインです。 <!--ページ内リンク--> <iframe src="B.html#Blink" frameborder="0" width="850" height="200" marginwidth="0" marginheight="0" scrolling="no"></iframe> <!--ここから#Baの内容--> <a name="linkAa" id="linkAa"></a> <iframe src="B.html#Ba" frameborder="0" width="850" height="580" marginwidth="0" marginheight="0" scrolling="no"></iframe> <!--ページ内リンク--> <iframe src="B.html#Blink" frameborder="0" width="850" height="200" marginwidth="0" marginheight="0" scrolling="no"></iframe> <!--ここから#Bbの内容--> <a name="linkAb" id="linkAb"></a> <iframe src="B.html#Bb" frameborder="0" width="850" height="595" marginwidth="0" marginheight="0" scrolling="no"></iframe> <!--ページ内リンク--> <iframe src="B.html#Blink" frameborder="0" width="850" height="200" marginwidth="0" marginheight="0" scrolling="no"></iframe> <!--ここから#Bcの内容--> <a name="linkAc" id="linkAc"></a> <iframe src="B.html#Bc" frameborder="0" width="850" height="565" marginwidth="0" marginheight="0" scrolling="no"></iframe> ◆B.html（子フレーム） ※JSは使用可です。 <div class="pageLink"> <a name="Blink" id="Blink"></a> <ul> <li><a href="A.html#linkAa" target="_top">#linkAaへリンク</a></li> <li><a href="A.html#linkAb" target="_top">#linkAbへリンク</a></li> <li><a href="A.html#linkAc" target="_top">#linkAcへリンク</a></li> </ul> </div> <a name="Ba" id="Ba"></a> <div>Baの内容</div> <a name="Bb" id="Bb"></a> <div>Bbの内容</div> <a name="Bc" id="Bc"></a> <div>Bcの内容</div> 以上です。 よろしくお願いいたします。
- ベストアンサー
- HTML
- <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
- リンクページが表示されません
ＰＣ歴5ヶ月弱のものです。ＴＯＰページからサブページにジャンプしようとするとアクセス不可の答えが返ってきます。初めてフレームページに挑んだのですがそのページだけリンクしません。パスの指定が悪いのか、フレーム定義が悪いのか解らず困っています、どうか助けてやってください。 <td><A href="frame.htm"><img width="20" height="20" src="a_tai3.gif">リンク先</A></td> ↑パス指定 ↓フレーム定義 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <HTML> <HEAD> <TITLE>タイトル</TITLE> </HEAD> <FRAMESET COLS="180px,*" FRAMEBORDER="no" BORDER="0" FRAMESPACING="0" > <FRAME SRC="ｘｘｘ.f.html" NAME="f1" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="auto" > <FRAME SRC="ｙｙｙ.htm" NAME="f2" SCROLLING="auto"> <NOFRAMES><body>｜<A HREF="ｚｚｚ.htm">内容</A>｜</body> </NOFRAMES> </FRAMESET> </HTML>
- ベストアンサー
- HTML
- 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として呼び出すページを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内リンクを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
- フレームありのページにリンクしてさらにそこに表示するHTMLも指定する
まずフレームのなしのページ（以降A）からフレームありのページ（以降B）へリンクさせます。 そしてBは毎回違うものを表示したいのです。 そこで、今まではAのリンク先を常にBにしてBのフレームのソースを毎回書き換えてました。例えば以下のmain001.hrmlをmain002.htmlにしたりして。 <FRAME name="header" scrolling="NO" src="header.html" frameborder="NO" noresize> <FRAME name="main" src="main001.hrml" scrolling="AUTO" frameborder="NO" noresize> ですが、毎回このフレームのソースを買えるのではなく、 Aのリンクの記述を変えることでBのフレームのmainのHTMLを変更したいのです。 要はフレームのページへリンクしてさらにそこに表示するHTMLもリンクもとのページから制御したいのです。 できるんでしょうか？ お願いいたします。
- 締切済み
- JavaScript
- iframe内MENU
ほんと色々お世話になります。 iframeの件でご質問申し上げます。 iframe内に別ページで作成しました。 メニューページを表示させています。 （別ページ作成したｃｓｓmenuを丸投げしている感じです。 <iframe src="css_tatoeba.html"frameborder="0" height="40" scrolling="no" width="554"></iframe> こんな感じです。） 別ページでリンクを貼り親ページで試してみるとiframe内にリンク先が 一部表示されてしまいます。（レイアウト崩れのような感じで） iframe内ではなく、新たなページに表示させたいのですがどうすればよろしいのでしょうか？ 色々試したのですが上手くいきません。 教えて頂ければ幸いです。
- ベストアンサー
- HTML
- 表示範囲の狭い時のアンカータグについて
仕事でHTMLを製作しております。 環境はウインドウズXPSP2です。 HTMLの構造は 親ページ、A.htmlに、 子ページ、B.htmlが <iframe name=001 src="B.html" frameborder=0 width=200 scrolling=auto height=1000></iframe> に表示されているというものです。 A.htmlに項目がずらっと並んでいて、 それにリンクが張ってあり、それらをクリックすると 表示されているB.htmlの指定箇所を表示するというものです。 現在、A.htmlのリンクは、 <a href="B.html#01">1</a> <a href="B.html#02">2</a> <a href="B.html#03">3</a>となっており、 B.htmlには、 <a name="01"></a> <a name="02"></a> <a name="03"></a> となる、アンカーリンクが張ってあります。 これで、動きは完動するのですが、 <iframe name=001 src="B.html" frameborder=0 width=200 scrolling=auto height=1000></iframe> とあるように、表示されている縦が1000と、デザイン上すごく長くて、ふつうのPCでは表示し切れていません。現状この状況でアンカーリンクをクリックすると、通常動作と同時に親ページ、A.htmlの表示がページの一番下にスクロールしてしまいます。 A.htmlにある項目がデザイン上、上方にあるので、 他の項目を見るたびにA.htmlを上までスクロールしなければいけないのです。 アンカータグであるという原因はわかっているのですが、対処の仕方に悩んでいます。 わかりずらい状況かもしれませんが、 ご教授よろしくお願い致します。
- ベストアンサー
- HTML
