web-dev-qa-db-fra.com

IE 8 frontière iframe

Il y a une bordure sur une iframe et je ne peux pas m'en débarrasser.

IE 6 et 7 fonctionnent comme prévu avec un peu de JavaScript:

function test(){
    var iframe = document.getElementById('frame2');
    iframe.contentWindow.document.body.style.backgroundColor = "#a31d1d";
    iframe.contentWindow.document.body.style.border = "#a31d1d";
    iframe.contentWindow.document.body.style.outlineColor = "#a31d1d";
}

Mais la bordure reste visible dans IE 8.

javascripthtmlcssiframeinternet-explorer-8
34
Terry

Ajoutez les attributs suivants à la balise iframe:

marginheight="0" marginwidth="0" frameborder="0"
94
Assaf Feldman

J'ai eu le même problème avec les iframes créés dynamiquement et il s'est avéré que la définition des propriétés de la bordureAPRÈSl'ajout de l'iframe au document aNOeffect: 

Le code suivant montre une bordure 3d: 

var iframe = document.createElement("IFRAME");
iframe.src = "http:www.stackoverflow.com";
//Iframe added BEFORE setting border properties.
document.body.appendChild(iframe);
iframe.frameBorder = "no";

Mais cela le supprime réellement:

var iframe = document.createElement("IFRAME");
iframe.src = "http:www.stackoverflow.com";
iframe.frameBorder = "no";
//Iframe added AFTER setting border properties.
document.body.appendChild(iframe);

J'espère que cela vous aidera à résoudre votre problème.

17
MK.

Succès!

Essaye ça. Il trouvera tous les éléments iframe et supprimera leurs bordures dans IE et les autres navigateurs (bien que vous puissiez simplement définir le style "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, des iframes ajoutés en HTML brut 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 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 les erreurs "accès refusé" dans la console d'erreur IE. Si cela se produit, votre seule option est de le définir avant sa génération, comme d'autres l'ont noté, ou d'utiliser l'attribut frameBorder = "0" non standard. (ou laissez simplement IE paraître fugly - mon option favorite actuelle;))

Il m'a fallu 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.
         }
   }
1
FirstFraktal

J'ai essayé beaucoup de variations sur cette idée et j'ai fini par utiliser quelque chose dans ce sens. Je pensais le partager.

<script type="text/javascript">
   url = 'http://www.dollypower.com';
   title = 'Dolly Power';
   width = '660';
   height = '430';
    document.write('<iframe src='+url+' title='+title+' width='+width+' height='+height+' frameborder=0></iframe>');
 </script>

Ensuite, j'ai utilisé des balises noscript pour entrer une alternative pour les utilisateurs non-JS, à savoir:

<noscript><p><a href="http://www.dollypower.com" target="_blank">Please click here for Dolly Power</a></p></noscript>

Je l'ai testé dans IE8 et c'est tout cool pour moi et cela valide également.

J'espère que cela pourrait aider quelqu'un là-bas! 

1
Rachel

Gardez à l’esprit que cela peut être IE ne respectant pas les paramètres de bordure dans le css, alors que le réglage traditionnel de l'attribut BORDER=0 sur l'élément iframe peut fonctionner. Vaut le test, au moins.

Edit: Il semble que ce qui règle le problème est de définir frameborder = '0' sur l'élément iframe. Cela a fonctionné pour moi, au moins.

0
Kzqai

Si vous voulez que votre code soit validé, vous pouvez le faire en javascript. J'ai trouvé la solution idéale quand j'ai eu ce problème il y a quelques mois ici

var iframe = document.createElement("iframe");
 iframe.src = "banner_728x90.gif";
 iframe.width = "728";
 iframe.height = "90";
 iframe.frameBorder = "0";
 iframe.scrolling = "no";
 document.body.appendChild(iframe);

si vous souhaitez charger une autre page de manière transparente dans l'iframe, vous pouvez le faire si vous copiez et collez ce code dans l'en-tête de votre page. Je l'ai trouvé sur un site avec des scripts gratuits. La performance est bonne dans la plupart des cas

function getDocHeight(doc) {
    doc = doc || document;
    var body = doc.body, html = doc.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
    return height;
}
function setIframeHeight(id) {
    var ifrm = document.getElementById(id);
    var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
    ifrm.style.visibility = 'hidden';
    ifrm.style.height = "10px"; // reset to minimal height in case going from longer to shorter doc
    ifrm.style.height = getDocHeight( doc ) + 10 + "px";
    ifrm.style.visibility = 'visible';
}

Vous attribuez ensuite un identifiant à votre iframe et appelez le script au chargement. C'est ainsi.

var iframe = document.createElement("iframe");
 iframe.setAttribute('id', "ifrm1");
 iframe.setAttribute('src', 'http://www.hekcmviw.com/'); // change the URL
 iframe.setAttribute('width', '100%');
 iframe.setAttribute('height', '10');
 iframe.setAttribute('frameBorder', '0');
 iframe.setAttribute('scrolling', 'no');
 iframe.setAttribute('onload' ,"setIframeHeight(this.id)");
 document.body.appendChild(iframe);
0
Kevin Lynch

Un exemple de HTML pour aller avec l'exemple de JS serait utile =)

Essayez d’utiliser les outils de développement d’IE8 (appuyez sur la touche F12 de la page avec laquelle vous avez des problèmes) pour identifier les styles appliqués à l’iframe. Vous pouvez également jouer avec les styles là-bas, pour réduire votre temps d'itération.

0
Dan Davies Brackett