Atsortingbut HTML5 iFrame

En HTML5, l’iframe a de nouveaux atsortingbuts comme “seamless” qui devraient supprimer les bordures et les barres de défilement. Je l’ai essayé mais 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:

 

Une idée pourquoi ça ne marche pas?

Une autre question, est-il possible de cibler une section spécifique de la page dans l’iframe?

Ce n’est pas encore pris en charge correctement.

Chrome 31 (et éventuellement une version antérieure) prend en charge certaines parties de l’atsortingbut, mais il n’est pas entièrement pris en charge.

Mise à jour: octobre 2016

L’atsortingbut seamless n’existe plus. Il a été initialement prévu pour être inclus dans la première spécification HTML5, mais a ensuite été abandonné. Un atsortingbut non apparenté du même nom a fait une brève apparition dans le brouillon HTML5.1, mais celui-ci a également été abandonné mi-2016:

Donc, je pense que l’essentiel du sharepoint vue de l’implémentation et de celui du développeur Web est que la seamless telle que spécifiée ne semble pas être le sharepoint départ. Ou du moins c’est plus que quiconque ne le souhaitait réellement. Et de toute façon, comme le dit @annevk , il semble que beaucoup de ces événements aient été «dépassés par les événements» à la lumière de Shadow DOM.

En d’autres termes: purgez l’atsortingbut seamless de votre mémoire et faites comme si vous n’aviez jamais existé.

Pour la postérité, voici ma réponse originale d’il y a cinq ans:

Réponse originale: avril 2011

L’atsortingbut est en mode brouillon pour le moment. Pour cette raison, aucun des navigateurs actuels ne le supporte encore (l’implémentation étant sujette à modification). En attendant, il est préférable d’utiliser CSS pour supprimer les bordures / barres de défilement de l’iframe:

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

L’atsortingbut transparent ne se limite pas à ce qui peut être ajouté avec CSS: une partie du raisonnement derrière l’atsortingbut était d’autoriser le contenu nested à hériter des mêmes styles appliqués à l’iframe (agissant comme si le document incorporé était un gros nested dans l’élément, par exemple).

Enfin, les versions d’Internet Explorer (8 et antérieures) nécessitent des atsortingbuts supplémentaires pour supprimer les bordures, les barres de défilement et la couleur d’arrière-plan:

  

Naturellement, cela ne valide pas. Donc, c’est à vous de décider comment le gérer. Mon approche (pointilleuse) consisterait à sniffer la chaîne d’agent et à append les atsortingbuts des versions d’IE antérieures à 9.

J’espère que cela pourra aider. 🙂

Selon la dernière recommandation HTML5 du W3C (qui est probablement la norme HTML5 finale) publiée aujourd’hui, il n’y a plus d’atsortingbut homogène dans l’élément iframe . Il semble avoir été supprimé quelque part dans le processus de normalisation.

Selon caniuse.com, aucun navigateur majeur ne prend en charge cet atsortingbut (vous ne devriez donc plus l’utiliser).

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

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

Vous devez utiliser la méthode window.postMessage pour communiquer entre le parent et l’iframe.

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

Dans la version chrome 32, une bordure de 2 pixels apparaît automatiquement autour des iframes sans atsortingbut transparent. 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; } 

iO8 a supprimé la prise en charge de l’atsortingbut transparent iframe.

  • Testé dans Safari, HomeScreen, nouveau WKWebView et UIWebView.

Détails complets et évaluation des performances des autres modifications apscopes à iOS 8:

  • modifications iOS8 sur la liste de diffusion Cordova
  • Blog Sencha.com: Apple montre son amour pour HTML5 avec iOS 8

Il suffit d’écrire

sans couture

dans votre code. Il n’y a pas besoin de:

seamless = “seamless”

Je viens de le découvrir moi-même.

EDIT – cela ne supprime pas les barres de défilement. Étrangement

scrolling = “no” semble toujours fonctionner en html5. J’ai essayé d’utiliser la fonction de débordement avec un style en ligne recommandé par html5, mais cela ne fonctionne pas pour moi.

Utilisez l’atsortingbut frameborder sur votre iframe et définissez-le sur frameborder = “0”. Cela produit le look sans couture. Maintenant, vous dites peut-être que je veux que l’iframe nested contrôle plutôt les barres de défilement. Ensuite, vous devez créer un fichier script JavaScript qui calcule la hauteur moins les en-têtes et définir la hauteur. Debounce est un plugin javascript nécessaire pour que le redimensionnement fonctionne correctement dans les anciens navigateurs et parfois dans le chrome. Cela vous mènera dans la bonne direction.

Toujours en 2014, iframe transparent n’est pas entièrement pris en charge par tous les principaux navigateurs, vous devriez donc chercher une solution alternative.

En janvier 2014, iframe transparent n’est toujours pas pris en charge par Firefox ni IE 11, et il est pris en charge par Chrome, Safari et Opera (la version Webkit).

Si vous souhaitez vérifier cela et plus d’options supscopes en détail, le site de test HTML5 serait une bonne option:

http://html5test.com/results/desktop.html

Vous pouvez vérifier différentes plates-formes, dans la section des scores, vous pouvez cliquer sur chaque navigateur et voir ce qui est pris en charge et ce qui ne l’est pas.

Je n’ai rien trouvé qui réponde à mes exigences, hece je suis venu avec ce script (dépend de jQuery):

https://gist.github.com/invernizzie/95182de86ea9dc5daa80

Il redimensionnera l’iframe à la taille de la fenêtre d’affichage (en tenant compte d’un contenu plus large). Il pourrait utiliser une amélioration pour utiliser la hauteur de la fenêtre au lieu de la hauteur du contenu, dans le cas où la première est plus grande.