IEでのインラインフレーム内リンクの動きについて
- IEでのインラインフレーム内のリンクをクリックすると、ページ全体が上に動いてしまう現象が発生します。この問題はFirefoxやMozillaでも同様に発生します。
- この問題を解決するための具体的な方法はありませんが、Operaではこの問題が発生しないため、Operaの解釈が特殊な可能性があります。
- インラインフレーム内のリンクをクリックしても、ページ全体ではなく、インラインフレーム内のコンテンツのみを動かしたい場合、別の解決策を見つける必要があります。
- ベストアンサー
親ページからインラインフレーム内の<a name="～">リンクへ飛ばしたときのIEの動きについて
例えば、IEで <html> <head><title>index.html</title> </head> <body><center> <p style="margin: 100px auto 50px auto">サンプル</p> <p><a href="a.html#a" target="frame">リンク</a></p> <iframe src="a.html" width="640" height="500" name="frame" style="margin-bottom: 400px"> </iframe></center> </body> </html> というソースのindex.htmlに、 <html><head><title>インフレーム・a.html</title></head> <body><p style="margin-top: 500px">余白</p> <p><a name="a">NAME A</a></p> <p style="margin-top: 500px">余白</p> </body></html> というソースのa.htmlというファイルをインラインフレームで読み込み、 index.htmlの「<p><a href="a.html#a" target="frame">リンク</a></p>」をクリックした場合、 インラインフレーム内のa.htmlの「<p><a name="a">NAME A</a></p>」がブラウザの一番上に表示されるよう、 index.htmlのページ全体が上に動いてしまいますよね。 これを、（同じものをOperaで動作させたときのように、） index.htmlのページ全体ではなくインラインフレーム内のa.htmlだけが 動くように表示させたいのですが、何かいい解決策はあるでしょうか？ 最初はIEのバグかと思ったのですが、FirefoxでもMozillaでも 同様なので、Operaの解釈のほうが特殊なのかもしれませんが…。
- n_mn
- お礼率87% (7/8)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
HTML をまともに書いてそれであればどうしようもないと思います。 多分仕様でしょう…。
関連するQ&A
- インラインフレームの、リンク先のページに対応した高さ可変
私のサイトで、題名のとおりの方法をしてしており、 現在、以下を利用して、可変が可能になっています。 function GetHeight(ID,NAME) { if (document.height) { document.getElementById(ID).style.height = parent.frames[NAME].document.height +20 +"px" ; } else { document.getElementById(ID).style.height = parent.frames[NAME].document.body.scrollHeight +20 +"px"; } } 通常の場合はこれで大丈夫です。 しかし、リンク先のページにインラインフレームを使用していると、どうしてもうまくできません。 一番前に index.html。index.htmlの中にiframeとして、main.htmlを、 main.htmlの中にiframeとして、higumain.htmlをおいています。 それぞれのiframeを可変可能にしたいのですが、 index.htmlの中のiframe「main.html」がうまく可変されません。 index.htmlのiframe は、他のiframeを移用していないリンク先なら可変しました。 何故でしょうか。解決法、教えてください。 上記で足りない説明がありましたら、すみません。言ってください。すぐに加えます。 何度も試行錯誤したのですが、うまくいきません。どうか、教えてください。
- ベストアンサー
- JavaScript
- インラインフレーム内へのリンク
質問させて頂きます。 インラインフレーム内へのリンクが上手くいかなくて困っています。 name="main" でインラインフレームに名前を付け、外部からはtarget属性でtarget="main"と指定してリンクをはっているのですが、どういうわけだか新しいウインドウが開いてしまいます。 ソースをのせておきますので、どこがいけないのか御指導頂けないでしょうか。お願い致します。（暫定的にYAHOO!にリンクさせています） 以下ソース↓ <html> <head> <title>インラインフレーム</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body bgcolor="#FFFFFF"> <table width="500" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td height="17"><a href="http://www.goo.ne.jp" target="main">YAHOO!</a></td> </tr> <tr> <td height="300"><iframe border="0" frameborder="0" marginheight="0" marginwidth="0" name="main" scrolling="yes" style="border:solid 1pt cc0000" src="http://www.yahoo.co.jp" width="500" height="300"></iframe></td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- インラインフレームの縦幅を、ブラウザ・画面・解像度に合わせて、自動的に調節させたいけど、IEとOperaで上手くいきません；；
現在ホームページを制作中で、初めてインラインフレームを使って制作しています。 まず下記のように、インラインフレームのみで試してみたら、IE７・Opera・FireFox・GoogleChromeで上手く自動的に調節できました。 <html> <head> </head> <body> <div> <iframe src="frame_test.html" allowtransparency="true" frameborder="0" width="600" height="80%"></iframe> </div> </body> </html> 次に、インラインフレームの周りに、下記のように画像やリンクバナーなどを配置させました。 <html> <head> </head> <body> <div><img src="" width="50" height="600"></div> <div><img src="" width="150" height="600"></div> <div> <iframe src="frame_test.html" allowtransparency="true" frameborder="0" width="600" height="80%"></iframe> </div> </body> </html> これも予定通り、IE７・Opera・FireFox・GoogleChromeで上手く自動的に調節できました。 次に、下記のようにそれぞれをフロートさせて配置させてみました。 <html> <head> </head> <body> <div style="float:left;"><img src="" width="50" height="600"></div> <div style="float:left;"><img src="" width="150" height="600"></div> <div style="float:left;"> <iframe src="frame_test.html" allowtransparency="true" frameborder="0" width="600" height="80%"></iframe> </div> </body> </html> すると、FireFox・GoogleChromeでは上手くいったのですが、IE7・Operaでインラインフレームの縦幅が100pxくらいに短くなってしまい、調節もできなくなってしまいました。 それぞれを配置させるのにフロートは必要なので、どうすればよいか分からなくて困っています。 何が原因で、どうすれば上手くいくか分かる方、どうかアドバイスをお願いします。
- 締切済み
- HTML
- タイトル表示をインラインフレームの<title>内のものにしたい
最初に「index.html」にアクセスしたときは、そのままのタイトル表示 （<title>タグ内のもの）で問題ないのですが、インラインフレーム内 に、例えば「annai.html」を表示させたときに、現在のフレーム内の ページタイトルに変えることは可能でしょうか？ 下に詳しく表記します。 アクセス当初「index.html」 ↓ ・・・・・・・・・・・・・・・・・・・・ <html> <head> <title>インデックス</title> </head> <body> <a href="annai.html" target="NAME">案内</a> <iframe name="NAME" （略）></iframe> </body> <html> ・・・・・・・・・・・・・・・・・・・・ 上記のままだとブラウザのタイトルバーに「インデックス」と表示される インラインフレームに「annai.html」を表示させたとき、 ↓ ・・・・・・・・・・・・・・・・・・・・ <html> <head> <title>案内</title> </head> <body> </body> <html> ・・・・・・・・・・・・・・・・・・・・ タイトルバーを上記の<title>タグ内の、「案内」に変えたい 返ってややこしい説明になっていましたら、スイマセン。 回答よろしくお願いいたします。
- ベストアンサー
- HTML
- ページ全体をインラインフレームにしたい
大きな1枚の画像の上にメニューと本文を同時に表示にするため、ページ全体を２つのインラインフレームにしたページを作ろうとしています。 スタイルシートで左右2カラムのレイアウトにして、左のインラインフレームはwidth:20%;height:100%;、右のインラインフレームはwidht:80%;height:100%;で指定したのですが、指定した覚えもないのに右側に余白ができてしまいます。 htmlやbodyのmarginとpaddingを0pxにしたりwidth:100%;とheight:100%;を入れてみたんですが、効果なしです。 基本的な作り方を習ったこともないので、途方にくれています。 端に余白が出来ないように、ページ全体をインラインフレームにする方法を教えてください！
- ベストアンサー
- HTML
- インラインフレームを使用するとIE6でレイアウトが崩れます。
インラインフレームを使用するとIE6でレイアウトが崩れます。 2カラム、左メニューのwebページを作っているのですが、 インラインフレームを使用したページのみ、IE6でレイアウト崩れがおこります。 css＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ #box { width:800px; } #main { width: 605px; margin: 5px; float: right; } #menu { width:180px; margin: 5px; float: left; } iframe.member { width: 595px; height: 700px; border-left: solid 5px #000000; border-right: solid 5px #000000; border-bottom: solid 5px #000000; margin-top: 0px; margin-right: 5px; } HTML＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ <body> ・ ・ ・ <div id="box"> <div id="main"> <img src="***.gif" title="見出し画像"> <iframe src="***.html" frameborder="0" class="member"></iframe> </div> <div id="menu"> メニュー </div> <!-- #boxここまで --></div> ・ ・ ・ </body> ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ boxのなかにmain（右回り込み）とmenu（左回り込み）で２カラムにしています。 mainのなかに、mainの幅と同等となるインラインフレームを配置したいのですが 上記のようにするとmenuが回り込まず、mainの左下に表示されます。 iframe.memberを使用せず、ほぼ同等のdiv（下記#contents）を切り テキストのページをつくった場合はきれいに回り込みます。 css＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ #contents { padding: 15px; width: 565px; border-left: solid 5px #000000; border-right: solid 5px #000000; border-bottom: solid 5px #000000; margin-top: 0px; margin-right: 5px; } HTML＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ <body> ・ ・ ・ <div id="box"> <div id="main"> <img src="***.gif" title="見出し画像"> <div id="contents"> テキスト テキスト </div> <div id="menu"> メニュー </div> ・ ・ ・ </body> ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ 一度インラインフレームを設置したページからインラインフレームを削除しても divの幅をせばめてみるなどのテストをしても カラム落ち？は直らないという謎の状況です・・・ 他のサイトを同じようなCSSで作ったときには、 インラインフレームを使用してもIE6で問題なく表示されたので 今回のエラー？ バグ？ がなぜおこっているのか見当もつきません。 状況を上手く説明出来てないかもしれませんが、 アドバイス等ありましたらお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
- インラインフレームの下にあるリンクをクリックする方法
インラインフレームの下にあるリンクをクリックする方法 allowtransparency="true"なiframeが画面いっぱいに広がっているとします。iframeの中の要素はiframeの領域より大分狭く、その他のほとんどの領域が透明です。iframeにオーバーレイされている大元のページを操作できるようにすることはできますでしょうか？リンクをクリックするなどです。下記に簡単なページの構造を記します。 <body> <a>be hopefully clicked</a> <iframe src='overlaying_contents.html' style="with: 1024px; height: 400px;" allowtransparency="true"> : <div>small main contents here</div> </iframe> </body>
- 締切済み
- HTML
- 単独で開かれた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
- HTMLアプリでインラインフレーム間リンクの表示
HTMLアプリケーション(hta)で インラインフレームにリンクボタンを置き、 別のインラインフレームにリンク先を表示する ことができるか教えてください。 ※IE6を使用しています。 HTMLタグを書くと、フレーム内のリンクをクリックすると 別ウィンドウが開いてしまいます。 ただし、フレーム外のリンクであればリンク先の表示ができます。 また、拡張子をhtmに変更すればすべて想定通りの動作をします。 記述に誤り、もしくは良い方法があれば、教えていただけませんでしょうか。 よろしくお願いします。 ------------ aaa.hta <a href="http://www.yahoo.co.jp" target=iframe2>aaa</a> <iframe name="iframe1" src="a_1.htm"></iframe> <iframe name="iframe2" src=#></iframe> a_1.htm <a href="http://www.yahoo.co.jp/" target="iframe2">click!</a> ------------
- ベストアンサー
- HTML
- インラインフレームの表示方法
少し前からホームページを作成しようとしているのですが、 テーブル内にインラインフレームを入れたところ、safariでインラインフレームが表示されませんでした。 これはsafari自体の使用のせいなのでしょうか？ それとも私のsafariの設定の問題なのでしょうか？ ちなみにIEやOperaだと正常に表示されます HTMLを抜粋すると <HTML> <HEAD> <TITLE>テスト</TITLE> </HEAD> <BODY> <table border="1" style="width:100%;height:100%;" cellpadding="5" cellspacing="0"> <tr><td> <div style="top:0px;left:50px;" > <table align="right"width="100%" height="100%"><tr><td> <iframe src="home.html" name="main-window" frameborder="0"width="100%" height="100%" scrolling="out"><p>インラインフレームを使用しています。見るにはインラインフレームをサポートしているブラウザが必要です。</p></iframe> </td></tr></table></div> </td></tr> </table> </BODY> </HTML> となっています。 本来はページを上下3段に分け真ん中の段にインラインフレームを入れようとしています。 どうかお力添えをお願いします。
- ベストアンサー
- Mac
お礼
そうですね、あの後フレームを色々小細工してみたりJavascriptを使ってみたりしましたが、Operaの動作をIEでそのまま再現することは難しそうでした。 とりあえず今回は諦めます。ご返答、有り難うございました。