Supprimer la bordure d'IFrame


707

Comment supprimer la bordure d'une iframe intégrée à mon application Web? Un exemple de l'iframe est:

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

Je voudrais que la transition du contenu de ma page vers le contenu de l'iframe soit transparente, en supposant que les couleurs d'arrière-plan sont cohérentes. Le navigateur cible est uniquement IE6 et, malheureusement, les solutions pour les autres n'aideront pas.


Vous pouvez le faire facilement en utilisant un générateur iframe
Shan Eapen Koshy

2
Créez simplement une classe comme ".nb {border: none;}" à l'intérieur de la balise <style>. Ajoutez ensuite le "class =" nb "" à l'intérieur de la balise <iframe>.
Jim

Réponses:


1126

Ajoutez l' frameBorderattribut (notez le «B» majuscule ).

Cela ressemblerait donc à:

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

3
Il m'a fallu une minute pour comprendre en JavaScript que vous avez juste besoin de element.frameBorder = 0. pas de style. et utilisez 0, pas '0'
anderspitman

15
Lors de la validation du document à l'aide du service de validation du balisage, frameBorder une erreur se produit car il n'est pas conforme à HTML5: l' attribut frameborder de l'élément iframe est obsolète. Utilisez plutôt CSS. En HTML5, je définirais une propriété CSS de border:0. Existe-t-il un moyen de le rendre rétrocompatible sans provoquer d'erreurs de validation?
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

1
@ MatthewT.Baker Bien sûr, voir ma réponse sur l'une des nombreuses autres questions sur cet attribut: stackoverflow.com/a/20719286/1016716 Oups, je vois que j'ai oublié le B majuscule là-dedans; Je vais éditer.
M. Lister

15
@MartinAndersson caniuse.com/#feat=iframe-sireless indique qu'elle n'est pas prise en charge du tout.
Tim Büthe

2
La réponse ici est correcte, mais les commentaires suggérant l'utilisation de l'attribut transparent ne sont plus corrects. L'attribut transparent a été supprimé de la spécification: w3.org/TR/2014/REC-html5-20141028/…
Ron E

145

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

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

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

13
C'est complètement ridicule! Bonne prise cependant. AINSI M'a sauvé de nombreuses heures de problèmes à nouveau :)
Alex

ce serait une bouée de sauvetage si la réponse était correcte, car il mentionne la capitale B .
KARASZI István

1
REMARQUE: les changements d'attribut frameborder dans le "débogueur" F12 ne seront pas affichés par IE6. Ajoutez plutôt un attribut dans le code html.

Notez que bien que la propriété JavaScript soit frameBorderavec un B majuscule, l'attribut HTML a toujours été insensible à la casse. Et en XHTML, il devrait être tout en minuscules frameborder.
M. Lister

83

Selon la documentation iframe , 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.

54

En plus d'ajouter l'attribut frameBorder, vous pouvez envisager de définir l'attribut de défilement sur "non" pour empêcher les barres de défilement d'apparaître.

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

1
Quel est son équivalent en HTML5?
Daniel Springer

3
style = "overflow: hidden"

21

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>

9

Utiliser l'attribut frameborder HTML iframe

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

Remarque: utilisez l' ordre du cadre B (cap B) pour IE, sinon cela ne fonctionnera pas. Mais, l'attribut frameborder iframe n'est pas pris en charge dans HTML5. Donc, utilisez plutôt CSS.

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

vous pouvez également supprimer le défilement à l'aide de l'attribut de défilement 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 transparent de la balise iframe n'est pris en charge que dans 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). Pour l'instant, l'attribut transparent de la balise n'est pris en charge que dans Opera, Chrome et Safari. Mais dans un avenir proche, ce sera la solution standard et sera compatible avec tous les navigateurs. http://www.w3schools.com/tags/att_iframe_seamless.asp



9

La propriété de style peut être utilisée Pour HTML5 si vous souhaitez supprimer le boder de votre cadre ou tout ce que vous pouvez utiliser la propriété de style. comme indiqué ci-dessous

Le code va ici

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

7

Ajoutez l'attribut frameBorder (majuscule 'B').

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

6

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 les autres navigateurs (bien que vous puissiez simplement définir un style de "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 les iframes qui sont 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 sûr) que si la fenêtre parent et iframe sont de la même origine (même domaine, port, protocole, etc.). Sinon, le script obtiendra des erreurs "accès refusé" dans la console d'erreurs IE. Si cela se produit, votre seule option consiste à le définir avant qu'il ne soit généré, comme d'autres l'ont noté, ou à utiliser l'attribut frameBorder = "0" non standard. (ou laissez simplement IE regarder à la perfection - mon option préférée actuelle;))

Cela m'a pris BEAUCOUP d'heures de travail au point de désespérer 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

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

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


5

Dans votre feuille de style, ajoutez

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

}

C'est également une option viable.


frameBorder n'a pas fonctionné pour moi, mais cela a fonctionné. Merci.
Dois

4

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 à "0" comme ceci:

<body style="margin:0px;">

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

Ajoutez l'attribut frameBorder ou utilisez un style avec une largeur de bordure de 0px; ou définissez un style de bordure égal à aucun.

utilisez l'un d'entre eux en dessous de 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>


3

définissez également border = "0px"

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

3

Essayer

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

Cela supprimera la bordure de votre cadre.


3

Utilisez ceci

style="border:none;

Exemple:

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

2

Pour supprimer la bordure, vous pouvez utiliser la propriété CSS border à aucune.

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

1

Son simple ajout d'un attribut dans la balise iframe frameborder = 0 <iframe src="" width="200" height="200" frameborder="0"></iframe>


Avant de répondre à une question, lisez toujours les réponses existantes. Cette réponse a déjà été fournie. Au lieu de répéter la réponse, votez la réponse existante. Vous trouverez ici quelques directives pour rédiger de bonnes réponses .
dferenc

0

1.Via Bordure de jeu de style en ligne: 0

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

2. Via Tag Attribute frameBorder Set 0

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

3. si nous avons plusieurs I Frame, nous pouvons donner la classe et mettre css en interne ou en externe.

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>

0

J'ai eu un problème avec la bordure blanche du bas et je n'ai pas pu le résoudre avec les règles de bordure, de marge et de remplissage ... Donc, ajoutez display:block;car l'iframe est un élément en ligne.

Cela prend en compte les espaces dans votre code HTML.


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

Fonctionne avec Firefox;)


question différente peut-être?

-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.
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.