Supprimer la bordure d'IFrame
https://stackoverflow.com/questions/65034
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Comment puis-je supprimer la bordure d'un iframe intégré dans mon application Web? Un exemple de <=> 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 <=> soit transparente, en supposant que les couleurs de l'arrière-plan soient cohérentes. Le navigateur cible est uniquement IE6 et, malheureusement, les solutions pour les autres n’aideront pas.
La solution
Ajoutez l'attribut frameBorder (notez le majuscule & # 8216; B & # 8217; ).
Cela ressemblerait donc à:
<iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible.</iframe>
Autres conseils
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 un B majuscule.
<iframe frameBorder="0" ></iframe>
Selon la iframe documentation, frameBorder est obsolète. et en utilisant la " bordure " L'attribut CSS est préféré:
<iframe src="test.html" style="width: 100%; height: 400px; border: 0"></iframe>
- Remarque La propriété de bordure CSS ne permet pas d'obtenir les résultats souhaités dans IE6, 7 ou 8.
Outre l'ajout de l'attribut frameBorder, vous pouvez envisager de définir l'attribut de défilement sur " no " 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 HTML iframe frameborder
http://www.w3schools.com/tags/att_iframe_frameborder.asp
Remarque: utilisez le cadre B pour activer Internet Explorer (cap B), 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 transparent de la balise iframe est uniquement pris en charge 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
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 d'iframe html5 pour personnaliser votre iframe sans modifier le code.
Ajoutez l'attribut frameBorder (Capital & # 8216; B & # 8217;).
<iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible. </iframe>
propriété de style peut être utilisée Pour HTML5, si vous souhaitez 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 bordures dans IE et les autres navigateurs (bien que vous puissiez simplement définir un style de & "; Bordure: aucune; &"; 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 pur et non en JavaScript)!
Cela semble fonctionner parce qu'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. ($ @ & amp; * # @ !!! 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 & Quot; accès refusé & Quot; erreurs dans la console d'erreur IE. Si cela se produit, votre seule option est de le définir avant qu'il soit généré, comme d'autres l'ont noté, ou d'utiliser le frameBorder non standard = & "0 &"; attribut. (ou tout simplement laisser IE paraître ridicule - mon option favorite actuelle;))
Cela m'a pris BEAUCOUP d’heures de travail jusqu’au désespoir 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 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>
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;
}
Dans votre feuille de style, ajoutez
{
padding:0px;
margin:0px;
border: 0px
}
C’est aussi 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 sur & "0 &. quot; 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.
définit également border = " 0px "
<iframe src="yoururl" width="100%" height="100%" frameBorder="0"></iframe>
Essayez
<iframe src="url" style="border:none;"></iframe>
Ceci supprimera la bordure de votre cadre.
Utilisez ceci
style="border:none;
Exemple:
<iframe src="your.html" style="border:none;"></iframe>
Ajoutez l’attribut frameBorder ou utilisez un style avec border-width 0px ;, ou définissez un style de bordure égal à aucun.
utilisez l'un des niveaux inférieurs 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>
Pour supprimer la bordure, vous pouvez utiliser la propriété de bordure CSS sans exception.
<iframe src="myURL" width="300" height="300" style="border: none">Browser not compatible.</iframe>
Il suffit d'ajouter un 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.
