Question Supprimer la bordure d'IFrame


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

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

Je voudrais passer du contenu de ma page au contenu du iframe être transparent, en supposant que les couleurs d'arrière-plan sont cohérentes. Le navigateur cible est IE6 seulement et malheureusement les solutions pour les autres ne vont pas aider.


621
2017-09-15 17:45


origine


Réponses:


Ajouter le frameBorder attribut (notez le capitale 'B').

Donc ça ressemblerait à:

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

1006
2017-09-15 17:54



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>

141



Outre l'ajout de l'attribut frameBorder, vous pouvez envisager de définir l'attribut de défilement sur "no" 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 > 

50



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 fait ne pas atteindre les résultats souhaités dans IE6, 7 ou 8.

45



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>

20



Utiliser l'attribut frameborder HTML iframe

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

Remarque: utilisez le cadreBcommander (cap B) pour IE, sinon ne fonctionnera pas. Toutefois, l'attribut iframe frameborder n'est pas pris en charge dans 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 l'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 devrait ressembler à une partie du document contenant (pas de frontières ou de barres de défilement). À partir de maintenant, l'attribut transparent de la balise est uniquement pris en charge dans Opera, Chrome et Safari. Mais dans un futur proche ce sera la solution standard et sera compatible avec tous les navigateurs. http://www.w3schools.com/tags/att_iframe_seamless.asp


8



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

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


7



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

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

6



La propriété de style peut être utilisée  Pour HTML5 si vous voulez 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>

6



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 que l'iframe est généré et mis en place dans le document (par exemple les iframes qui sont ajoutées en HTML et non en JavaScript)!

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

Remarque: La partie IE ne fonctionnera (bien sûr) que si la fenêtre parente et iframe proviennent de la même origine (même domaine, port, protocole, etc.). Sinon, le script recevra 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 non standard frameBorder = "0". (ou laissez simplement IE regarder fugly - mon option préférée actuelle;))

Il m'a fallu BEAUCOUP d'heures de travail jusqu'au désespoir pour comprendre ...

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

5