IFrameから境界線を削除

707

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

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

ページのコンテンツからiframeのコンテンツへの移行をシームレスにしたいのですが、背景色が同じであると想定しています。対象のブラウザはIE6のみであり、残念ながら他の人のためのソリューションは役に立ちません。

html  css  iframe  internet-explorer-6  noborder 
— JoelB
ソース
— Shan Eapen Koshy
2
<style>タグ内に「.nb {border：none;}」のようなクラスを作成するだけです。次に、<iframe>タグ内に「class = "nb"」を追加します。
— ジム

回答:

1126

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

したがって、次のようになります。

<iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible.</iframe>
— デビッドバサラブ
ソース
3
JavaScriptで理解するのに少し時間がかかりましたが、element.frameBorder = 0が必要です。.styleは使用せず、「0」ではなく0を使用
— anderspitman
15
マークアップ検証サービス を使用してドキュメントを検証すると、frameBorderHTML5に準拠していないためエラーが発生します。iframe要素のframeborder属性は廃止されました。代わりにCSSを使用してください。 HTML5では、CSSプロパティをに設定しますborder:0。検証エラーを発生させずに下位互換性を保つ方法はありますか？
— ᴍᴀᴛᴛʙᴀᴋᴇʀ
1
MatthewT.Baker確かに、@、この属性の他の多くの質問のいずれかに私の答えを参照してください。stackoverflow.com/a/20719286/1016716おっと、私はそこに資本Bを忘れてしまった参照。編集します。
— Mr Lister
15
@MartinAndersson caniuse.com/#feat=iframe-seamlessは、サポートされていないことを示しています。
— TimBüthe2015年
2
ここでの答えは正しいですが、シームレス属性の使用を示唆するコメントはもはや正しくありません。：シームレスな属性は、仕様から削除されていw3.org/TR/2014/REC-html5-20141028/...
— ロン・E
145

IE7でボーダーを削除しようとして狂った後、frameBorder属性では大文字と小文字が区別されることがわかりました。

大文字のBで frameBorder属性を設定する必要があります。

<iframe frameBorder="0"></iframe>
— Adam
ソース
13
これは完全にばかげています！いいキャッチ。SOは私に再び多くの時間のトラブルを救いました:)
— Alex
それが大文字のBに言及しているので、それが正解であるならば、それは命の恩人です。
— カラシイストヴァン
1
注：F12「デバッガ」でのframeborder属性の変更は、IE6では表示されません。代わりに、HTMLコードに属性を追加します。
JavaScriptプロパティにはframeBorder大文字のB が付いていますが、HTML属性では実際には常に大文字と小文字が区別されないことに注意してください。XHTMLでは、すべて小文字にする必要がありますframeborder。
— Mr Lister '12
83

あたりとしてのiframeドキュメント、FRAMEBORDERが廃止され、「国境」CSS属性を使用することは好ましいです。

<iframe src="test.html" style="width: 100%; height: 400px; border: 0"></iframe>
  • CSSボーダープロパティは、IE6、7、または8で望ましい結果を達成していません。
— Roberto Chiaretti
ソース
54

frameBorder属性を追加することに加えて、スクロールバーが表示されないように、スクロール属性を「no」に設定することを検討してください。 

<iframe src="myURL" width="300" height="300" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
— ゼノックス
ソース
1
HTML5でこれに相当するものは何ですか？
— Daniel Springer、
3
style = "overflow：hidden"
21

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

<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>
— Marnix Bras
ソース
9

HTML iframe frameborder属性を使用する

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

注：IEにはフレームBの順序（キャップ​​B）を使用してください。そうしないと機能しません。ただし、iframeのframeborder属性はHTML5ではサポートされていません。したがって、代わりに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の新しいシームレス属性を使用できます。iframeタグのseamless属性は、Opera、Chrome、Safariでのみサポートされています。存在する場合、iframeはそれが含まれているドキュメントの一部であるように見えることを指定します（境界線やスクロールバーはありません）。現在のところ、タグのシームレス属性はOpera、Chrome、Safariでのみサポートされています。しかし、近い将来、それが標準のソリューションとなり、すべてのブラウザーと互換性を持つようになります。http://www.w3schools.com/tags/att_iframe_seamless.asp

— シュバムバダル
ソース
9

フレームのボーダーまたはスタイルプロパティを使用できるすべてのものを削除する場合は、スタイルプロパティを HTML5 に使用できます。以下に示すように

ここにコードが入ります

<iframe src="demo.htm" style="border:none;"></iframe>
— アルパンサイニ
ソース
7

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

<iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible. </iframe>
— ハーデン・ラーフル
ソース
6

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

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

注：IE部分は、親ウィンドウとiframeが同じ起源（同じドメイン、ポート、プロトコルなど）からのものである場合にのみ（もちろん）機能します。そうでない場合、スクリプトはIEエラーコンソールで「アクセス拒否」エラーを受け取ります。その場合、他の人が指摘しているように、生成する前に設定するか、非標準の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.
         }
   }
— 3回転
ソース
6

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

* {
  padding:0px;
  margin:0px;
 }
— th0ward
ソース
5

iframeを配置するページのdoctypeがHTML5の場合、次のseamlessように属性を使用できます。

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

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

— デビッド・チューテ
ソース
4
縫い目は素晴らしいアイデアのようですが、残念ながらうまくサポートされていません。caniuse.com/#search=seamless
— code_monk
4
それは全くサポートされていません。
— skobaljic 2015
5

スタイルシートに追加

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

}

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

— Tropilac
ソース
frameBorderは機能しませんでしたが、機能しました。ありがとう。
— ドイス
4

iFrameを使用して画面全体の幅と高さに合わせる場合、これは300x300のサイズに基づいていないと想定しているため、本文のマージンを次のように "0"に設定する必要があります。

<body style="margin:0px;">
— マイケル・ヘル
ソース
4 
<iframe src="mywebsite" frameborder="0" style="border: 0px solid white;">HTML iFrame is not compatible with your browser</iframe>

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

— IamGuest
ソース
4

frameBorder属性を追加するか、border-width 0px;のスタイルを使用するか、ボーダースタイルを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>
スニペットを展開

— Divya Chugh
ソース
2

ボーダーを削除するには、CSSボーダープロパティをnoneに使用できます。

<iframe src="myURL" width="300" height="300" style="border: none">Browser not compatible.</iframe>
— ユーザー8349297
ソース
1

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

— チェタン・チャウハン
ソース
質問に回答する前に、必ず既存の回答を読んでください。この回答はすでに提供されています。答えを繰り返す代わりに、既存の答えに投票してください。良い答えを書くためのいくつかのガイドラインはここにあります。
— dferenc
0

1.Via Inline Style set border：0

 <iframe src="display_file.html" style="height: 400px; width:
   100%;border: 0;">HTML iFrame is not compatible with your browser
   </iframe>

2.タグ属性frameBorder Set 0経由

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

3.複数のIフレームがある場合は、クラスを指定してCSSを内部または外部に配置できます。

HTML： 

<iframe src="display_file.html" class="no_border_iframe">
    HTML iFrame is not compatible with your browser 
</iframe>

CSS：

<style>
.no_border_iframe{
border: 0; /* or border:none; */
}
</style>
— サミル・ラカニ
ソース
0

下の白い境界線に問題があり、境界線、マージン、パディングルールで修正できませんでした... display:block; iframeはインライン要素なます。

これにより、HTMLの空白が考慮されます。

— mEnE
ソース
-1 
iframe src="XXXXXXXXXXXXXXX"
marginwidth="0" marginheight="0" width="xxx" height="xxx"

Firefoxで動作します;）

— 災害のマスター
ソース
別の質問でしょうか？
-1 
<iframe src="URL" frameborder="0" width="100%" height="200">
<p>Your browser does not support iframes.</p>
</iframe>

<iframe frameborder="1|0">

(OR)

<iframe src="URL" width="100%" height="300" style="border: none">Your browser 
does not support iframes.</iframe>

The <iframe> frameborder attribute is not supported in HTML5. Use CSS 
instead.
— Md Shahriar
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.