it-swarm-eu.dev

Rand aus IFrame entfernen

Wie entferne ich den Rahmen aus einem iframe, der in meine Web-App eingebettet ist? Ein Beispiel für das 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 von iframe nahtlos ist, vorausgesetzt, die Hintergrundfarben sind konsistent. Der Zielbrowser ist nur IE6 und leider helfen Lösungen für andere nicht.

662
JoelB

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

So würde es aussehen:

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

Nachdem ich 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 B setzen.

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

Gemäß der iframe -Dokumentation ist frameBorder veraltet und die Verwendung des CSS-Attributs "border" wird bevorzugt:

<iframe src="test.html" style="width: 100%; height: 400px; border: 0"></iframe>
  • Hinweis: Mit der CSS-Eigenschaft border werden in IE6, 7 oder 8 nicht die gewünschten Ergebnisse erzielt .
67

Zusätzlich zum Hinzufügen des frameBorder-Attributs können 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 > 
53
xenox

Fügen Sie bei browserspezifischen Problemen auch frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0" gemäß Dreamweaver 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>
21
Marnix Bras

Verwenden Sie das HTML-iframe-Frameborder-Attribut

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

Hinweis: Verwenden Sie Frame B Reihenfolge (Kappe B) für IE, sonst funktioniert nicht. 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 nahtlose Attribute verwenden, die in HTML5 neu sind. Das Seamless-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 ob er Teil des enthaltenen Dokuments ist (keine Rahmen oder Bildlaufleisten). Ab sofort wird das Seamless-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

9
Shubham Badal

Sie können 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 den Code zu bearbeiten.

8

Stileigenschaft kann verwendet werden Für HTML5 können Sie die Stileigenschaft verwenden, wenn Sie den Rahmen Ihres Rahmens oder etwas anderes entfernen möchten. wie unten angegeben

Code geht hier

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

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

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

Wenn der Doctype der Seite, auf der Sie den Iframe platzieren, HTML5 ist, können Sie das seamless -Attribut folgendermaßen verwenden:

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

Mozilla-Dokumente zum Seamless-Attribut

6
David Tuite

Sie können dies auch mit JavaScript tun. Es findet alle iframe-Elemente und entfernt deren Rahmen in IE und anderen Browsern (obwohl Sie in Browsern ohne IE anstelle von JavaScript einfach den Stil "border: none" festlegen können). UND es funktioniert auch, wenn es verwendet wird, nachdem der Iframe generiert und im Dokument platziert wurde (z. B. Iframes, die in einfachem HTML und nicht in JavaScript hinzugefügt wurden)!

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

Hinweis: Der Teil IE 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 die Fehlermeldung "Zugriff verweigert" in der Fehlerkonsole IE. In diesem Fall besteht Ihre einzige Option darin, sie vor der Generierung festzulegen, wie andere bemerkt haben, oder das nicht standardmäßige Attribut frameBorder = "0" zu verwenden. (oder lass IE nur flüchtig aussehen - meine derzeitige Lieblingsoption;))

Es hat mich VIELE Stunden gekostet, 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.
         }
   }
6
FirstFraktal

In Ihrem Stylesheet hinzufügen

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

}

Dies ist auch eine praktikable Option.

5
Tropilac

Ich habe alles oben Genannte ausprobiert, und wenn das bei Ihnen nicht funktioniert, versuchen Sie es mit dem folgenden CSS, um das Problem für mich zu beheben. Dies weist die Browser lediglich an, keine Abstände oder Ränder hinzuzufügen.

* {
  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>

Dieser Code sollte in HTML 4 und 5 funktionieren.

4
IamGuest

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 von 300 x 300 basieren, müssen Sie auch die Körperränder wie folgt auf "0" setzen:

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

setze auch border = "0px"

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

Versuchen

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

Dadurch wird der Rahmen Ihres Rahmens entfernt.

2
Amaan Iqbal

Fügen Sie entweder das frameBorder-Attribut hinzu, oder verwenden Sie einen Stil mit einer Randbreite von 0px; oder setzen Sie den Randstil auf none.

benutze einen 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>
2
Divya Chugh

Benutze das

style="border:none;

Beispiel:

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

Es ist einfach, ein Attribut im iframe-Tag frameborder = 0 <iframe src="" width="200" height="200" frameborder="0"></iframe> hinzuzufügen.

1
Chetan Chauhan

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

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