Rand aus IFrame entfernen

707

Wie würde ich den Rand von einem in meine Web-App eingebetteten Iframe entfernen? Ein Beispiel für den Iframe ist:

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

Ich möchte, dass der Übergang vom Inhalt meiner Seite zum Inhalt des Iframes nahtlos verläuft, vorausgesetzt, die Hintergrundfarben sind konsistent. Der Zielbrowser ist nur IE6 und leider helfen Lösungen für andere nicht.

JoelB
quelle
Sie können dies einfach tun, indem Sie einen Iframe-Generator verwenden
Shan Eapen Koshy
2
Erstellen Sie einfach eine Klasse wie ".nb {border: none;}" im <style> -Tag. Fügen Sie dann das "class =" nb "" in das <iframe> -Tag ein.
Jim

Antworten:

1126

Fügen Sie das frameBorderAttribut hinzu (beachten Sie das Großbuchstaben 'B' ).

So würde es aussehen:

<iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible.</iframe>
David Basarab
quelle
3
Ich habe eine Minute gebraucht, um in JavaScript herauszufinden, dass Sie nur element.frameBorder = 0 benötigen. no .style und benutze 0, nicht '0'
anderspitman
15
Wenn das Dokument mit dem Markup Validation Service validiert wird, tritt frameBorderein Fehler auf, da es nicht HTML5-kompatibel ist: Das Frameborder-Attribut für das iframe-Element ist veraltet. Verwenden Sie stattdessen CSS. In HTML5 würde ich eine CSS-Eigenschaft von festlegen border:0. Gibt es eine Möglichkeit, es abwärtskompatibel zu machen, ohne Validierungsfehler zu verursachen?
26 ʙᴀᴋᴇʀ
1
@ MatthewT.Baker Sicher, siehe meine Antwort auf eine der anderen vielen Fragen zu diesem Attribut: stackoverflow.com/a/20719286/1016716 Hoppla, ich sehe, ich habe die Hauptstadt B dort vergessen. Ich werde bearbeiten.
Herr Lister
15
@MartinAndersson caniuse.com/#feat=iframe-seamless gibt an, dass es überhaupt nicht unterstützt wird.
Tim Büthe
2
Die Antwort hier ist korrekt, jedoch sind die Kommentare, die die Verwendung des nahtlosen Attributs vorschlagen, nicht mehr korrekt. Das nahtlose Attribut wurde aus der Spezifikation entfernt: w3.org/TR/2014/REC-html5-20141028/…
Ron E.
145

Nachdem ich verrückt geworden war und versucht hatte, den Rand in IE7 zu entfernen, stellte ich fest, dass das frameBorder-Attribut zwischen Groß- und Kleinschreibung unterscheidet.

Sie müssen das frameBorder-Attribut mit einem Großbuchstaben festlegen B .

<iframe frameBorder="0"></iframe>
Adam
quelle
13
Das ist völlig lächerlich! Guter Fang. SO ersparte mir wieder viele Stunden Ärger :)
Alex
es wäre lebensrettend sein , wenn die richtige Antwort wäre, weil es die Hauptstadt erwähnt B .
KARASZI István
1
HINWEIS: Änderungen der Frameborder-Attribute in F12 "Debugger" werden vom IE6 nicht angezeigt. Fügen Sie stattdessen ein Attribut im HTML-Code hinzu.
Beachten Sie, dass bei der JavaScript-Eigenschaft in frameBorderGroßbuchstaben B das HTML-Attribut die Groß- und Kleinschreibung nicht berücksichtigt hat. Und in XHTML sollte alles in Kleinbuchstaben geschrieben sein frameborder.
Herr Lister
83

Wie per iframe Dokumentation ist veraltet und die frameborder „border“ CSS - Attribut wird bevorzugt:

<iframe src="test.html" style="width: 100%; height: 400px; border: 0"></iframe>
  • Hinweis: Die CSS- Randeigenschaft erzielt in IE6, 7 oder 8 nicht die gewünschten Ergebnisse.
Roberto Chiaretti
quelle
54

Zusätzlich zum Hinzufügen des frameBorder-Attributs sollten Sie das Scrolling-Attribut auf "no" setzen, um zu verhindern, dass Bildlaufleisten angezeigt werden.

<iframe src="myURL" width="300" height="300" frameBorder="0" scrolling="no">Browser not compatible. </iframe > 
Xenox
quelle
1
Was ist das Äquivalent in HTML5?
Daniel Springer
3
style = "Überlauf: versteckt"
21

Für browserspezifische Probleme fügen Sie frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"laut Dreamweaver auch Folgendes hinzu:

<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
quelle
9

Verwenden Sie das HTML-Iframe-Frameborder-Attribut

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

Hinweis: Verwenden Sie die Frame B- Reihenfolge (Kappe B) für den IE, da dies sonst nicht funktioniert. Das iframe-Frameborder-Attribut wird in HTML5 jedoch nicht unterstützt. Verwenden Sie stattdessen CSS.

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

Sie können das Scrollen auch mit dem Scrolling-Attribut http://www.w3schools.com/tags/att_iframe_scrolling.asp entfernen

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

Sie können auch ein nahtloses Attribut verwenden, das in HTML5 neu ist. Das nahtlose Attribut des iframe-Tags wird nur in Opera, Chrome und Safari unterstützt. Wenn vorhanden, gibt es an, dass der Iframe so aussehen soll, als wäre er Teil des enthaltenen Dokuments (keine Rahmen oder Bildlaufleisten). Ab sofort wird das nahtlose Attribut des Tags nur in Opera, Chrome und Safari unterstützt. In naher Zukunft wird es jedoch die Standardlösung sein und mit allen Browsern kompatibel sein. http://www.w3schools.com/tags/att_iframe_seamless.asp

Shubham Badal
quelle
9

Sie können verwenden style="border:0;" in Ihrem Iframe-Code verwenden. Dies ist die empfohlene Methode zum Entfernen von Rahmen in HTML5.

Schauen Sie sich mein HTML5-Iframe-Generator- Tool an, um Ihren Iframe anzupassen, ohne Code zu bearbeiten.

Shan Eapen Koshy
quelle
9

Die Stileigenschaft kann für HTML5 verwendet werden, wenn Sie den Boder Ihres Frames entfernen möchten oder wenn Sie die Stileigenschaft verwenden möchten. wie unten angegeben

Code geht hier

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

Fügen Sie das frameBorder-Attribut (Großbuchstabe 'B') hinzu.

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

Sie können dies auch mit JavaScript tun. Es werden alle iframe-Elemente gefunden und ihre Rahmen in IE und anderen Browsern entfernt (obwohl Sie in Nicht-IE-Browsern einfach den Stil "border: none;" festlegen können, anstatt JavaScript zu verwenden). UND es funktioniert auch, wenn es verwendet wird, nachdem der Iframe generiert wurde und im Dokument vorhanden ist (z. B. Iframes, die in einfachem HTML und nicht in JavaScript hinzugefügt wurden)!

Dies scheint zu funktionieren, da der IE den Rahmen nicht wie erwartet für das iframe-Element erstellt, sondern für den INHALT des iframe - nachdem der iframe in der Stückliste erstellt wurde. ($ @ & * # @ !!! IE !!!)

Hinweis: Der IE-Teil funktioniert (natürlich) nur, wenn das übergeordnete Fenster und der Iframe vom selben Ursprung stammen (gleiche Domäne, Port, Protokoll usw.). Andernfalls erhält das Skript Fehler "Zugriff verweigert" in der IE-Fehlerkonsole. In diesem Fall können Sie es nur festlegen, bevor es generiert wird, wie andere angemerkt haben, oder das nicht standardmäßige Attribut frameBorder = "0" verwenden. (oder lassen Sie den IE einfach flüchtig aussehen - meine aktuelle Lieblingsoption;))

Ich habe VIELE Stunden gearbeitet, bis ich verzweifelt war, um das herauszufinden ...

Genießen. :) :)

// =========================================================================
// 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.
         }
   }
J118
quelle
6

Ich habe alle oben genannten Schritte ausprobiert. Wenn dies bei Ihnen nicht funktioniert, hat das unten stehende CSS das Problem für mich behoben. Das sagt den Browsern nur, dass sie keine Auffüllungen oder Ränder hinzufügen sollen.

* {
  padding:0px;
  margin:0px;
 }
th0ward
quelle
5

Wenn der Doctype der Seite, auf der Sie den Iframe platzieren, HTML5 ist, können Sie das seamlessAttribut wie folgt verwenden :

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

Mozilla dokumentiert das nahtlose Attribut

David Tuite
quelle
4
Nähte mögen eine großartige Idee, werden aber leider nicht gut unterstützt. caniuse.com/#search=seamless
code_monk
4
Es wird überhaupt nicht unterstützt.
Skobaljic
5

Fügen Sie in Ihrem Stylesheet hinzu

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

}

Dies ist auch eine praktikable Option.

Tropilac
quelle
frameBorder hat bei mir nicht funktioniert, aber das hat funktioniert. Vielen Dank.
Dois
4

Wenn Sie den iFrame verwenden, um die Breite und Höhe des gesamten Bildschirms anzupassen, wobei ich davon ausgehe, dass Sie nicht auf der Größe 300 x 300 basieren, müssen Sie auch die Körperränder wie folgt auf "0" setzen:

<body style="margin:0px;">
Michael Herr
quelle
4
<iframe src="mywebsite" frameborder="0" style="border: 0px solid white;">HTML iFrame is not compatible with your browser</iframe>

Dieser Code sollte sowohl in HTML 4 als auch in HTML 5 funktionieren.

IamGuest
quelle
4

Fügen Sie entweder das frameBorder-Attribut hinzu oder verwenden Sie einen Stil mit der Rahmenbreite 0px; oder setzen Sie den Rahmenstil auf none.

Verwenden Sie eine von unten 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
quelle
3

setze auch border = "0px"

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

Versuchen

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

Dadurch wird der Rand Ihres Rahmens entfernt.

Amaan Iqbal
quelle
3

Benutze das

style="border:none;

Beispiel:

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

Um den Rand zu entfernen, können Sie die CSS-Randeigenschaft auf none setzen.

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

Es ist einfach, einfach ein Attribut in iframe tag frameborder = 0 hinzuzufügen <iframe src="" width="200" height="200" frameborder="0"></iframe>

Chetan Chauhan
quelle
Lesen Sie immer die vorhandenen Antworten, bevor Sie eine Frage beantworten. Diese Antwort wurde bereits gegeben. Anstatt die Antwort zu wiederholen, stimmen Sie die vorhandene Antwort ab. Einige Richtlinien zum Schreiben guter Antworten finden Sie hier .
dferenc
0

1. Über Inline Style Set Rand: 0

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

2. Über das Tag-Attribut frameBorder Set 0

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

3. Wenn wir mehrere I-Frames haben, können wir Klasse geben und CSS intern oder extern einfügen.

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>
Samir Lakhani
quelle
0

Ich hatte ein Problem mit dem unteren weißen Rand und konnte es nicht mit Rand-, Rand- und Auffüllregeln beheben ... display:block;Fügen Sie also hinzu, weil iframe ein Inline-Element ist.

Dies berücksichtigt Leerzeichen in Ihrem HTML.

MEEN
quelle
-1
iframe src="XXXXXXXXXXXXXXX"
marginwidth="0" marginheight="0" width="xxx" height="xxx"

Funktioniert mit Firefox;)

Meister der Katastrophe
quelle
andere Frage vielleicht?
-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
quelle