web-dev-qa-db-ja.com

IFrameから枠線を削除する

Webアプリに埋め込まれたiframeから境界線を削除するにはどうすればよいですか。 iframeの例は次のとおりです。

<iframe src="myURL" width="300" height="300">Browser not compatible.</iframe>

背景色が一貫していると仮定して、私のページのコンテンツからiframeのコンテンツへの移行をシームレスにしたいと思います。ターゲットブラウザはIE6のみであり、残念ながら他の人のための解決策は役に立たないでしょう。

htmlcssiframeinternet-explorer-6noborder
645
JoelB

frameBorder属性を追加します（ 大文字の「B」 に注意してください）。

だからそれはようになります：

<iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible.</iframe>
1051
David Basarab

IE7で境界線を削除しようとして気が狂った後、frameBorder属性は大文字と小文字を区別することがわかりました。

FrameBorder属性を大文字の _ b _ に設定する必要があります。

<iframe frameBorder="0" ></iframe>
142
Adam

iframe ドキュメントによると、frameBorderは非推奨であり、 "border" CSS属性を使用することが好ましいです。

<iframe src="test.html" style="width: 100%; height: 400px; border: 0"></iframe>
  • 注：CSSのボーダープロパティは、IE6、7、または8でnotで望ましい結果を達成することはありません。
64
Roberto Chiaretti

FrameBorder属性を追加することに加えて、スクロールバーが表示されないようにするには、scrolling属性を "no"に設定することを検討します。

<iframe src="myURL" width="300" height="300" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
53
xenox

Dreamweaverによると、ブラウザ固有の問題についてはframeborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"も追加します。

<iframe src="test.html" name="banner" width="300" marginwidth="0" height="300" marginheight="0" align="top" scrolling="No" frameborder="0" hspace="0" vspace="0">Browser not compatible. </iframe>
21
Marnix Bras

HTMLのiframeフレームボーダー属性を使用する

http://www.w3schools.com/tags/att_iframe_frameborder.asp

注：IEにはframe _ b _ order（cap B）を使用してください。そうしないと機能しません。しかし、iframe frameborder属性はHTML 5ではサポートされていません。そのため、代わりにCSSを使用してください。

<iframe src="http://example.org" width="200" height="200" style="border:0">

スクロール属性/を使用してスクロールを削除することもできます http://www.w3schools.com/tags/att_iframe_scrolling.asp

<iframe src="http://example.org" width="200" height="200" scrolling="no" style="border:0">

HTML5で新しく追加されたseamless属性も使えます。 iframeタグのシームレス属性は、Opera、Chrome、Safariでのみサポートされています。存在する場合は、iframeがそれを含む文書の一部であるように見せることを指定します（枠線やスクロールバーは含みません）。現時点では、タグのシームレス属性はOpera、Chrome、Safariでのみサポートされています。しかし近い将来、それが標準的なソリューションになり、すべてのブラウザと互換性があるようになるでしょう。 http://www.w3schools.com/tags/att_iframe_seamless.asp

9
Shubham Badal

あなたのiframeコードでstyle="border:0;"を使うことができます。これは、HTML 5の枠線を削除するための推奨方法です。

コードを編集せずにiframeをカスタマイズするには、my html5 iframe generator toolを調べてください。

8
Shan Eapen Koshy

スタイルプロパティを使用することができます あなたがあなたのフレームの境界線を削除したい場合、またはあなたがスタイルプロパティを使用することができる何かHTML5の場合。下記の通り

コードはここに行きます

<iframe src="demo.htm" style="border:none;"></iframe>
7
Arpan Saini

FrameBorder属性（大文字の「B」）を追加します。

<iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible. </iframe>
7
Harden Rahul

Iframeを配置しているページのDoctypeがHTML5の場合は、seamless属性を次のように使用できます。

<iframe src="..." seamless="seamless"></iframe>

シームレス属性に関するMozillaのドキュメント

6
David Tuite

この方法でJavaScriptでもそれを行うことができます。 IEや他のブラウザでiframe要素を見つけてそれらの境界線を削除します（ただし、JavaScriptを使用する代わりにIE以外のブラウザでは "border：none;"のスタイルを設定できます）。また、iframeが生成されてドキュメント内に配置された後で使用しても機能します（例：JavaScriptではなく、プレーンHTMLで追加されたiframe）。

IEは期待どおりにiframe要素上ではなく、iframeのCONTENT上（BOMでiframeが作成された後）に境界線を作成するため、これは機能するように見えます。 （$ @＆*＃@ !!! IE !!!）

注：IE部分は、親ウィンドウとiframeが同じOrigin（同じドメイン、ポート、プロトコルなど）からのものである場合にのみ（もちろん）機能します。そうでない場合、スクリプトはIEエラーコンソールに "access denied"エラーを受け取ります。そのような場合は、他の人が指摘したように、生成する前に設定するか、非標準のframeBorder = "0"属性を使用するしかありません。 （あるいは単にIEを見栄えよくしてください - 私の現在のお気に入りのオプションです;））

これを理解するために絶望のポイントまで多くの作業時間をかけてください...

楽しい。 :)

// =========================================================================
// Remove borders on iFrames

if (window.document.getElementsByTagName("iframe"))
   {
      var iFrameElements = window.document.getElementsByTagName("iframe");
      for (var i = 0; i < iFrameElements.length; i++)
         {
            iFrameElements[i].frameBorder="0";   //  For other browsers.
            iFrameElements[i].setAttribute("frameBorder", "0");   //  For other browsers (just a backup for the above).
            iFrameElements[i].contentWindow.document.body.style.border="none";   //  For IE.
         }
   }
6
FirstFraktal

あなたのスタイルシートに追加する

{
  padding:0px;
  margin:0px;
  border: 0px

}

これも実行可能なオプションです。

5
Tropilac

私は上記のすべてを試してみました、そしてそれがあなたのために働かないなら以下のCSSを試してみてください私のために問題を解決しました。これは、パディングやマージンを追加しないようブラウザに指示するだけです。

* {
  padding:0px;
  margin:0px;
 }
5
th0ward
<iframe src="mywebsite" frameborder="0" style="border: 0px solid white;">HTML iFrame is not compatible with your browser</iframe>

このコードはHTML 4と5の両方で機能するはずです。

4
IamGuest

画面全体の幅と高さに合わせてiFrameを使用している場合（これは300 x 300のサイズに基づいていないと想定しています）、本体余白も次のように "0"に設定する必要があります。

<body style="margin:0px;">
4
Michael Herr

border = "0px"も設定する

 <iframe src="yoururl" width="100%" height="100%" frameBorder="0"></iframe>
3
Ajesh Kolakkadan

やってみる

<iframe src="url" style="border:none;"></iframe>

これはあなたのフレームの境界線を削除します。

2
Amaan Iqbal

FrameBorder属性を追加するか、border-width 0px;を使用してstyleを使用するか、borderスタイルをnoneに設定してください。

3の下からいずれかを使用してください。

<iframe src="myURL" width="300" height="300" style="border-width:0px;">Browser not compatible.</iframe>

<iframe src="myURL" width="300" height="300" frameborder="0">Browser not compatible.</iframe>

<iframe src="myURL" width="300" height="300" style="border:none;">Browser not compatible.</iframe>
2
Divya Chugh

これを使って

style="border:none;

例：

<iframe src="your.html" style="border:none;"></iframe>
2
user6375752

その単純なものは、iframeタグに属性を追加するだけですframeframeder = 0 <iframe src="" width="200" height="200" frameborder="0"></iframe>

1
Chetan Chauhan

枠線を削除するには、CSSのborderプロパティをnoneに設定します。

<iframe src="myURL" width="300" height="300" style="border: none">Browser not compatible.</iframe>
1
user8349297