web-dev-qa-db-fra.com

Supprimer la bordure d'IFrame

Comment puis-je supprimer la bordure d'un iframe intégré à mon application Web? Un exemple de iframe est:

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

Je voudrais que la transition du contenu de ma page au contenu de la iframe soit transparente, en supposant que les couleurs de fond soient cohérentes. Le navigateur cible est IE6 uniquement et, malheureusement, les solutions pour les autres ne vont pas aider.

htmlcssiframeinternet-explorer-6noborder
662
JoelB

Ajoutez l’attribut frameBorder (notez le majuscule ‘B’).

Donc, cela ressemblerait à:

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

Après être devenu fou en essayant de supprimer la bordure dans IE7, j'ai constaté que l'attribut frameBorder était sensible à la casse.

Vous devez définir l'attribut frameBorder avec une majuscule B.

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

Selon iframe documentation, frameBorder est obsolète et l'utilisation de l'attribut CSS "border" est préférable:

<iframe src="test.html" style="width: 100%; height: 400px; border: 0"></iframe>
  • Remarque La propriété de bordure CSS n'atteint pas les résultats souhaités dans IE6, 7 ou 8.
67
Roberto Chiaretti

Outre l'ajout de l'attribut frameBorder, vous pouvez envisager de définir l'attribut de défilement sur "non" pour empêcher l'affichage des barres de défilement.

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

Pour les problèmes spécifiques au navigateur, ajoutez également frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0" selon 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>
21
Marnix Bras

Utiliser l'attribut HTML iframe frameborder

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

Remarque: utilisez frame B order (cap B) pour IE, sinon cela ne fonctionnera pas. Cependant, l'attribut iframe frameborder n'est pas pris en charge en HTML5. Alors, utilisez CSS à la place.

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

vous pouvez également supprimer le défilement à l'aide de l'attribut scrolling http://www.w3schools.com/tags/att_iframe_scrolling.asp

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

Vous pouvez également utiliser un attribut transparent qui est nouveau dans HTML5. L'attribut seamless de la balise iframe n'est pris en charge que par Opera, Chrome et Safari. Lorsqu'il est présent, il spécifie que l'iframe doit ressembler à une partie du document contenant (pas de bordures ni de barres de défilement). À partir de maintenant, l'attribut transparent de la balise n'est pris en charge que par Opera, Chrome et Safari. Mais dans un proche avenir, ce sera la solution standard et sera compatible avec tous les navigateurs. http://www.w3schools.com/tags/att_iframe_seamless.asp

9
Shubham Badal

Vous pouvez utiliser style="border:0;" dans votre code iframe. C'est la méthode recommandée pour supprimer la bordure en HTML5.

Découvrez mon générateur html5 d'iframe pour personnaliser votre iframe sans modifier le code.

8
Shan Eapen Koshy

La propriété Style peut être utilisée Pour HTML5 si vous souhaitez supprimer la bordure de votre cadre ou tout autre élément, vous pouvez utiliser la propriété style. comme indiqué ci-dessous

Le code va ici

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

Ajoutez l’attribut frameBorder (Capital ‘B’).

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

Si le type de document de la page sur laquelle vous placez l'iframe est HTML5, vous pouvez utiliser l'attribut seamless comme suit:

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

docs Mozilla sur l'attribut seamless

6
David Tuite

Vous pouvez également le faire avec JavaScript de cette façon. Il trouvera tous les éléments iframe et supprimera leurs bordures dans IE et d'autres navigateurs (bien que vous puissiez simplement définir le style "border: none;" dans les navigateurs non IE au lieu d'utiliser JavaScript). ET cela fonctionnera même s’il est utilisé APRÈS que l’iframe soit généré et en place dans le document (par exemple, des iframes ajoutés en HTML simple et non en JavaScript)!

Cela semble fonctionner car IE crée la bordure, non pas sur l'élément iframe comme prévu, mais sur le CONTENU de l'iframe - après la création de l'iframe dans la nomenclature. ($ @ & * # @ !!! IE !!!)

Remarque: La partie IE ne fonctionnera (bien entendu) que si la fenêtre parente et l'iframe sont de même origine (même domaine, port, protocole, etc.). Sinon, le script obtiendra les erreurs "accès refusé" dans la console d'erreur IE. Si cela se produit, votre seule option est de le définir avant sa génération, comme d'autres l'ont noté, ou d'utiliser l'attribut frameBorder = "0" non standard. (ou juste laisser IE regard fugly - mon option favorite actuelle;))

Cela m'a pris BEAUCOUP d’heures de travail jusqu’au désespoir pour comprendre cela ...

Prendre plaisir. :)

// =========================================================================
// 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

Dans votre feuille de style, ajoutez

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

}

C'est aussi une option viable.

5
Tropilac

J'ai essayé tout ce qui précède et si cela ne fonctionne pas pour vous, essayez le code CSS ci-dessous qui a résolu le problème pour moi. Ce qui dit simplement aux navigateurs de ne pas ajouter de marge ni de marge.

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

Ce code devrait fonctionner à la fois en HTML 4 et 5.

4
IamGuest

Si vous utilisez l'iFrame pour ajuster la largeur et la hauteur de tout l'écran, ce qui, je suppose, n'est pas basé sur la taille 300x300, vous devez également définir les marges du corps sur "0" comme ceci:

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

également définir border = "0px"

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

Essayer

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

Cela supprimera la bordure de votre cadre.

2
Amaan Iqbal

Ajoutez l’attribut frameBorder ou utilisez un style avec border-width 0px; ou définissez un style de bordure égal à aucun.

utilisez n'importe lequel d'en bas 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

Utilisez ceci

style="border:none;

Exemple:

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

C'est simple, il suffit d'ajouter un attribut dans la balise iframe frameborder = 0 <iframe src="" width="200" height="200" frameborder="0"></iframe>

1
Chetan Chauhan

Pour supprimer la bordure, vous pouvez utiliser la propriété de bordure CSS sur aucun.

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