Comment faire en sorte qu’un IFrame soit réactif dans iOS Safari?

Le problème est que lorsque vous devez utiliser IFrames pour insérer du contenu dans un site Web, le monde Web actuel devrait également réagir. En théorie, c’est simple, utilisez simplement ou définissez la largeur CSS sur iframe { width: 100%; } iframe { width: 100%; } Cependant, dans la pratique, ce n’est pas si simple, mais ça peut l’être.

Si le contenu iframe est entièrement réactif et peut être redimensionné sans barres de défilement internes, alors iOS Safari redimensionne l’ iframe sans aucun problème réel.

Si vous considérez le code suivant:

     Iframe Isolation Test  #Main { padding: 10px; }    

Iframe Isolation Test 13.17

Avec le Content.html :

     Iframe Isolation Test - Content  #Main { width: 100%; background: #ccc; }    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc malesuada purus quis commodo convallis. Fusce consectetur mauris eget purus sortingstique blandit. Nam nec volutpat augue. Aliquam sit amet augue vitae orci fermentum tempor sit amet gravida augue. Pellentesque convallis velit eu malesuada malesuada. Aliquam erat volutpat. Nam sollicitudin nulla nec neque viverra, non suscipit purus tincidunt. Aenean blandit nisi felis, sit amet ornare mi vestibulum ac. Praesent ulsortingces varius arcu quis fringilla. In vitae dui consequat, rutrum sapien ut, aliquam metus. Proin sit amet porta velit, suscipit dignissim arcu. Cras bibendum tellus eu facilisis sodales. Vestibulum posuere, magna ut iaculis consequat, tortor erat vulputate diam, ut pharetra sapien massa ut magna. Donec massa purus, pharetra sed pellentesque nec, posuere ut velit. Nam venenatis feugiat odio quis sortingstique.

Ensuite, cela fonctionne sans problèmes dans iOS 7.1 Safari. Vous pouvez changer entre paysage et portrait sans aucun problème.

entrer la description de l'image icientrer la description de l'image ici

Cependant, en modifiant simplement le CSS Content.html en ajoutant ceci:

  #ScrolledArea { width: 100%; overflow: scroll; white-space: nowrap; background: #ff0000; } 

Vous obtenez ceci:

entrer la description de l'image icientrer la description de l'image ici

Comme vous pouvez le voir, même si le contenu Content.html est totalement réactif (le div # ScrolledArea a un overflow: scroll défini) et que la largeur de l’iframe est de 100%, l’iframe prend toujours toute la largeur du div # ScrolledArea comme si le débordement existe même. Démo

Dans des cas comme celui-ci, si le contenu de l’ iframe comporte des zones de défilement, la question est de savoir comment répondre à l’ iframe lorsque le contenu de l’iframe comporte des zones de défilement horizontal. Le problème ne réside pas dans le fait que Content.html n’est pas réactif, mais dans le fait que iOS Safari redimensionne simplement l’iframe pour que le div#ScrolledArea soit entièrement visible.

La solution à ce problème est en réalité assez simple et il y a deux manières de s’y prendre. Si vous avez le contrôle sur Content.html, changez simplement la largeur CSS div#ScrolledArea en:

  width: 1px; min-width: 100%; *width: 100%; 

Fondamentalement, l’idée est simple: vous définissez une width inférieure à celle de la fenêtre (iframe width dans ce cas), puis remplacez-la par min-width: 100% pour tenir compte de la width: 100% réelle width: 100% par défaut pour iOS Safari écrase. La *width: 100%; est là donc le code restrait compatible IE6, mais si vous ne vous souciez pas d’IE6, vous pouvez l’omettre. Démo

entrer la description de l'image icientrer la description de l'image ici

Comme vous pouvez le voir maintenant, la largeur div#ScrolledArea est en réalité de 100% et le overflow: scroll; peut faire quelque chose et cacher le contenu débordant. Si vous avez access au contenu iframe, cela est préférable.

Cependant, si vous n’avez pas access au contenu iframe (pour une raison quelconque), vous pouvez utiliser la même technique sur l’iframe lui-même. Utilisez simplement le même CSS sur l’iframe:

  iframe { width: 1px; min-width: 100%; *width: 100%; } 

Cependant, il y a une limitation à cela, vous devez désactiver les barres de défilement avec scrolling="no" sur l’iframe pour que cela fonctionne:

  

Si les barres de défilement sont autorisées, cela ne fonctionnera plus sur l’iframe. Cela dit, si vous modifiez le Content.html à la place, vous pouvez conserver le défilement dans l’iframe. Démo

Le problème, semble-t-il, est que Mobile Safari refusera d’obéir à la largeur de votre iFrame si le document qu’il contient est plus large que ce que vous avez spécifié. Exemple:

http://jsbin.com/hapituto/1

Sur un navigateur de bureau, vous verrez un iFrame et un Div sur 300px. Le contenu est plus large pour que vous puissiez faire défiler l’iFrame.

Sur Safari mobile, cependant, vous remarquerez que l’iFrame est automatiquement étendu à la largeur du contenu.

J’imagine qu’il s’agit d’une solution de contournement pour les problèmes de longue date liés au défilement du contenu dans une page. Dans le passé, si vous aviez un iframe de défilement volumineux sur un périphérique tactile, vous deveniez «bloqué» dans l’iframe car cela ferait défiler la page elle-même. Il semble qu’Apple ait décidé que le comportement par défaut d’un iFrame est “pas de défilement” et se développe pour l’empêcher.

Une option peut être cette solution de contournement. Au lieu de supposer que l’iFrame défilera, placez l’iframe dans un DIV que vous contrôlez et laissez-le défiler.

exemple: http://jsbin.com/zakedaja/1

Exemple de balisage:

 

Sur Safari mobile, vous pouvez maintenant faire défiler le contenu de iFrame maintenant entièrement développé via le div qui le contient.

Le catch: Cela semble vraiment moche sur un navigateur de bureau, car maintenant vous avez des doubles barres de défilement. Donc, vous devrez peut-être faire une détection de navigateur avec JS pour contourner ce problème.

J’avais besoin d’une solution multi-navigateur. Les exigences étaient les suivantes:

  • nécessaire pour travailler sur iOS et ailleurs
  • n’a pas access au contenu de l’iFrame
  • besoin de faire défiler!

À partir de ce que j’ai appris de @Idra concernant le défilement = “non” sur iOS et ce post sur l’ajustement du contenu d’iFrame à l’écran sur iOS, voici ce que j’ai fini par dire. J’espère que ça aide quelqu’un =)

HTML

 

CSS

 html, body{ height: 100%; } #url-wrapper{ margin-top: 51px; height: 100%; } #url-wrapper iframe{ height: 100%; width: 100%; } #url-wrapper.ios{ overflow-y: auto; -webkit-overflow-scrolling:touch !important; height: 100%; } #url-wrapper.ios iframe{ height: 100%; min-width: 100%; width: 100px; *width: 100%; } 

JS

 function create_iframe(url){ var wrapper = jQuery('#url-wrapper'); if(navigator.userAgent.match(/(iPod|iPhone|iPad)/)){ wrapper.addClass('ios'); var scrolling = 'no'; }else{ var scrolling = 'yes'; } jQuery(' 

Le problème avec toutes ces solutions est que la hauteur de l’ iframe ne change jamais vraiment.

Cela signifie que vous ne pourrez pas centrer les éléments à l’intérieur de l’ iframe utilisant Javascript, position:fixed; ou position:absolute; puisque l’ iframe lui-même ne défile jamais.

Ma solution détaillée ici consiste à envelopper tout le contenu de l’iframe dans un div utilisant ce CSS:

 #wrap { position: fixed; top: 0; right:0; bottom:0; left: 0; overflow-y: scroll; -webkit-overflow-scrolling: touch; } 

De cette façon, Safari estime que le contenu n’a pas de hauteur et vous permet d’affecter correctement la hauteur de l’ iframe . Cela vous permet également de positionner les éléments comme vous le souhaitez.

Vous pouvez voir une démo rapide et sale ici.

Je travaille avec ionic2 et la configuration du système est comme ci-dessous-


 ****************************************************** Your system information: Cordova CLI: 6.4.0 Ionic Framework Version: 2.0.0-beta.10 Ionic CLI Version: 2.1.8 Ionic App Lib Version: 2.1.4 ios-deploy version: Not installed ios-sim version: 5.0.8 OS: OS X Yosemite Node Version: v6.2.2 Xcode version: Xcode 7.2 Build version 7C68 ****************************************************** 

Pour moi, ce problème a été résolu avec ce code-
pour les tags iframe html

 

Voir css du même


 .iframe_container { overflow: auto; position: relative; -webkit-overflow-scrolling: touch; height: 75%; } iframe { position:relative; top: 2%; left: 5%; border: 0 !important; width: 90%; } 

La propriété de position joue un rôle essentiel dans mon cas.
position: relative;

Cela peut vous aider aussi !!!

Solution CSS uniquement

HTML

 

CSS

 html,body { height:100%; } .h_iframe iframe { position:absolute; top:0; left:0; width:100%; height:100%; } 

DEMO

Une autre démo ici avec une page HTML dans iframe

J’ai rencontré un problème de largeur dans le volet de contenu en créant une barre de défilement horizontale pour l’iframe. Il s’est avéré qu’une image maintenait la largeur plus large que prévu. J’ai été capable de le résoudre en définissant toutes les images css max-width à un pour cent.

  img { max-width: 100%; height:auto; } 

en fait pour moi vient de travailler dans iOS en désactivant le défilement

et traiter le système d’exploitation via un script.