Supprimer la bordure d'IFrame

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.

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

Cela ressemblerait donc à:

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

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>

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.

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 > 

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>

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

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

Consultez mon outil générateur de iframe html5 pour personnaliser votre iframe sans modifier le code.

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>

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

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

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

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

Si le doctype de la page sur laquelle vous placez l'iframe est HTML5, vous pouvez utiliser l' seamlessattribut comme suit:

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

Documents de Mozilla sur l'attribut transparent

Dans votre feuille de style, ajoutez

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

}

C'est également une option viable.

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

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

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>

définissez également border = "0px"

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

Essayer

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

Cela supprimera la bordure de votre cadre.

Utilisez ceci

style="border:none;

Exemple:

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

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>

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

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>

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.

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

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