Attribut transparent iframe HTML5

Question

En HTML5, l'iframe a de nouveaux attributs, tels que «seamless», qui devrait supprimer les bordures et les barres de défilement. Je l'ai essayé mais cela ne semble pas fonctionner, je peux toujours voir les barres de défilement et les bordures (j'utilise Google Chrome comme navigateur). Voici mon code:

 <iframe seamless="seamless" title="google" width="600" height="300" src="http://www.google.co.uk"></iframe>
 

Une idée pourquoi ça ne marche pas?

Une dernière question: est-il possible de cibler une section spécifique de la page à l'intérieur de l'iframe?

Merci

Mauro

Answer 1

L'attribut est actuellement en mode brouillon pour le moment. Pour cette raison, aucun des navigateurs actuels soutiennent encore (comme la mise en œuvre est sujette au changement). Dans l'intervalle, il est préférable d'utiliser des CSS pour dépouiller les frontières/les barres de défilement de l'iframe:

iframe[seamless]{
    background-color: transparent;
    border: 0px none transparent;
    padding: 0px;
    overflow: hidden;
}

Il n'y a plus à la fluidité de l'attribut de ce qui peut être ajouté avec le CSS: une partie du raisonnement derrière l'attribut était de permettre contenu imbriqué à hériter de la même styles appliqués à l'iframe (agissant en tant que bien que le document incorporé a été l'une des imbriquée à l'intérieur de l'élément, par exemple).

Enfin, les versions d'Internet Exploiteur (8 et versions antérieures) nécessitent des attributs supplémentaires, afin de supprimer les frontières, les barres de défilement et la couleur d'arrière-plan:

<iframe frameborder="0" allowtransparency="true" scrolling="no" src="..."></iframe>

Naturellement, cela ne veut pas valider. Donc, c'est à vous, comment le gérer. Mon (pointilleux) approche serait de renifler de la chaîne de l'agent et ajouter les attributs pour IE versions antérieures à 9.

Espérons que cela aide. :)

Answer 2

Ce n'est pas encore supporté correctement.

Chrome 31 (et éventuellement une version antérieure) prend en charge certaines parties de l'attribut, mais celui-ci n'est pas totalement pris en charge.

Answer 3

Il est possible d'utiliser le semless attribut maintenant, ici j'ai trouvé un article en allemand http://www.solife.cc/blog/html5-iframe-attribut-seamless-beispiele.html

et voici une autre présentation sur ce sujet: http://benvinegar.github.com/seamless-talk/

Vous devez utiliser la fenêtre.postMessage méthode de communication entre le parent et l'iframe.

Answer 4

J'ai pensé que cela pourrait être utile à quelqu'un:

dans la version 32 de chrome, une bordure de 2 pixels apparaît automatiquement autour des iframes sans l'attribut seamless. Il peut être facilement supprimé en ajoutant cette règle CSS:

 iframe:not([seamless]) { border:none; }
 

Chrome utilise le même sélecteur avec ces styles d'agent d'utilisateur par défaut:

 iframe:not([seamless]) {
  border: 2px inset;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
}
 

Answer 5

iO8 a supprimé le support pour l'iframe transparente attribut.

• Testé dans Safari, l'écran d'accueil, nouvelle WKWebView et UIWebView.

Tous les Détails et l'analyse des performances d'iOS 8 changements:

• iOS8 changements sur Cordova liste de diffusion
• Sencha.com Blog : Apple Montre de l'Amour pour HTML5 avec iOS 8