Rand aus IFrame entfernen

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.

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>

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>

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.

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 > 

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>

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

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.

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>

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

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

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.
         }
   }

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;
 }

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

Fügen Sie in Ihrem Stylesheet hinzu

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

}

Dies ist auch eine praktikable Option.

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;">

<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.

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>

setze auch border = "0px"

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

Versuchen

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

Dadurch wird der Rand Ihres Rahmens entfernt.

Benutze das

style="border:none;

Beispiel:

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

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>

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

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>

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.

iframe src="XXXXXXXXXXXXXXX"
marginwidth="0" marginheight="0" width="xxx" height="xxx"

Funktioniert mit Firefox;)

<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.