Supprimer la bordure de L'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 une majuscule B .

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

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 > 

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

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

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>

Utilisez L'attribut HTML iframe frameborder

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

Note: utiliser cadre B ordre (cap B) pour IE, sinon ne fonctionnera pas. Mais, l'attribut iframe frameborder n'est pas pris en charge en HTML5. Donc, utilisez CSS à la place.

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

Vous pouvez également supprimer le défilement en utilisant 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 en HTML5. L'attribut seamless 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 ou de barres de défilement). À partir de Maintenant, l'attribut transparent de la balise n'est pris en charge que dans 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

Vous pouvez utiliser style="border:0;" dans votre code iframe. C'est le moyen recommandé de supprimer la bordure en HTML5.

Consultez mon outil HTML5 iframe generator pour personnaliser votre iframe sans modifier le code.

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

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

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

Le Code va ici

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

Vous pouvez également le faire avec JavaScript de cette façon. Il trouvera tous les éléments iframe et supprimera leurs frontières dans IE et d'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 la génération et la mise en place de l'iframe dans le document (par exemple, les iframes qui sont ajoutés en HTML et non en JavaScript)!

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

Note: la partie IE ne fonctionnera (bien sûr) que si la fenêtre parent et iframe proviennent de la même origine (même domaine, port,protocole, etc.). Sinon, le script obtiendra des erreurs "Accès refusé" dans la console D'erreur IE. Si cela se produit, votre seule option est de le définir avant qu'il ne soit généré, comme d'autres l'ont noté, ou d'utiliser l'attribut frameborder="0" non standard. (ou tout simplement laisser IE regarder fugly-mon option favorite actuelle;))

M'a pris de nombreuses heures de travail au point de désespérer pour comprendre cela...

Profitez. :)

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

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

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

Mozilla docs sur la fluidité de l'attribut

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

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

Dans votre feuille de style ajouter

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

}

C'est aussi une option viable.

<iframe src="mywebsite" frameborder="0" style="border: 0px solid white;">HTML iFrame is not compatible with your browser</iframe>

Ce code devrait fonctionner en HTML 4 et 5.

Si vous utilisez l'iFrame pour adapter la largeur et la hauteur de l'écran entier, que je suppose que vous n'êtes pas basé sur la taille 300x300, vous devez également définir les marges du corps à " 0 " comme ceci:

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

Définissez également border = " 0px "

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

Essayez

<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 border, vous pouvez utiliser la propriété CSS border sur none.

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

Ajoutez l'attribut frameBorder, ou utilisez style avec border-width 0px;, ou définissez le style de bordure égal à none.

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>

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

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.