Rahmen von IFrame entfernen

Question

Wie kann ich den Rahmen von einem in meiner Webanwendung eingebetteten iframe entfernen? Ein Beispiel für einen 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 iframe nahtlos ist, vorausgesetzt, die Hintergrundfarben sind einheitlich. Der Zielbrowser ist nur IE6 und leider werden Lösungen für andere nicht helfen.

Answer 1

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

Sehen Sie sich meine html5 iframe generator Tool, um Ihren iframe ohne Bearbeitung des Codes anzupassen.

Answer 2

Die Eigenschaft Style kann verwendet werden Für HTML5, wenn Sie den Rahmen Ihres Frames oder etwas anderes entfernen möchten, können Sie die Stileigenschaft verwenden.

Der Code steht hier

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

Answer 3

Verwenden Sie das HTML iframe frameborder Attribut

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

Hinweis: Rahmen verwenden B Ordnung (cap B) für IE, sonst funktioniert es nicht. Aber, das iframe frameborder-Attribut wird in HTML5 nicht unterstützt. So, Verwenden Sie CSS statt.

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

Sie können den Bildlauf auch mit dem Attribut scrolling entfernen http://www.w3schools.com/tags/att_iframe_scrolling.asp

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

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

Answer 4

Sie können es auch mit JavaScript auf diese Weise machen. Es findet alle iframe-Elemente und entfernt ihre Ränder in IE und anderen Browsern (obwohl Sie in Nicht-IE-Browsern einfach den Stil "border : none;" festlegen können, anstatt JavaScript zu verwenden). Und es funktioniert auch dann, wenn der iframe erst NACH der Erstellung des Dokuments eingesetzt wird (z. B. bei iframes, die in einfachem HTML und nicht in JavaScript hinzugefügt werden)!

Dies scheint zu funktionieren, weil der IE den Rahmen nicht auf dem iframe-Element erstellt, wie man erwarten würde, sondern auf dem INHALT des iframe - nachdem der iframe in der BOM erstellt wurde ($@&*#@!!! IE!!).

Hinweis: Der IE-Teil funktioniert (natürlich) nur, wenn das übergeordnete Fenster und der iframe denselben Ursprung haben (gleiche Domäne, gleicher Port, gleiches Protokoll usw.). Andernfalls wird das Skript "Zugriff verweigert" Fehler in der IE-Fehlerkonsole erhalten. Wenn das passiert, ist Ihre einzige Option, es zu setzen, bevor es generiert wird, wie andere bemerkt haben, oder verwenden Sie das Nicht-Standard-Attribut frameBorder="0". (oder einfach den IE hässlich aussehen lassen - meine derzeitige Lieblingsoption ;) )

Ich brauchte VIELE Stunden, in denen ich mich bis zur Verzweiflung abmühte, um das herauszufinden...

Genießen Sie. :)

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

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

Answer 5

Ich habe alle oben genannten Möglichkeiten ausprobiert, und wenn das bei Ihnen nicht funktioniert, versuchen Sie das folgende CSS, das das Problem für mich gelöst hat. Das sagt den Browsern einfach, dass sie keine Polsterung oder Ränder hinzufügen sollen.

* {
  padding:0px;
  margin:0px;
 }