web-dev-qa-db-fra.com

Problèmes de hauteur IFrame sur iOS (safari mobile)

Exemple de source de page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Page</title>
</head>
<body>
<div class="main" style="height: 100%;">
    <div class="header" style="height: 100px; background-color: green;"></div>

    <iframe src="http://www.wikipedia.com"
            style="height: 200px; width: 100%; border: none;"></iframe>

    <div class="footer" style="height: 100px; background-color: green;"></div>
</div>
</body>
</html>

Le problème est que height de 200px du style en ligne IFrames est ignoré lors d'un safari mobile:

enter image description here

J'aimerais également changer la hauteur de l'IFrame dynamiquement via Vanilla JavaScript qui ne fonctionne pas du tout avec le code suivant:

document.getElementsByTagName('iframe')[0].style.height = "100px"

La valeur du style height est modifiée correctement selon les outils de développement, mais elle est simplement ignorée car la hauteur réellement rendue de l'IFrame ne change pas.

Cela ne semble être un problème dans Safari mobile et fonctionne comme prévu sur les dernières versions de Safari de bureau, Firefox, Chrome, Androids WebView etc.

Page de test: http://devpublic.blob.core.windows.net/scriptstest/index.html

Ps.: J'ai testé cela avec divers appareils sur la pile de navigateur et j'ai également pris les captures d'écran là-bas car je n'ai pas d'iDevice réel à portée de main.

javascriptiosiphoneiframemobile-safari
22
suamikim

Cela ressemble à ceci: Comment obtenir un IFrame pour être réactif dans iOS Safari?

les iFrames ont un problème sur iOS uniquement, vous devez donc y adapter votre iframe.

Vous pouvez mettre un div enveloppant l'iframe, définir css sur l'iframe et, ce qui a fonctionné pour moi, a été d'ajouter: mettre l'attribut scrolling = 'no'.

Je vous souhaite bonne chance.

13
Gabriel Augusto

J'ai le même problème. Et après avoir essayé toutes les solutions que j'ai pu trouver, j'ai finalement trouvé comment le résoudre.

Ce problème est causé par iOS Safari, il dépensera automatiquement la hauteur de l'iframe pour s'adapter au contenu de la page à l'intérieur.

Si vous mettez l'attribut scrolling = 'no' à l'iframe comme <iframe scrolling='no' src='content.html'>, ce problème pourrait être résolu mais l'iframe ne pourrait pas montrer le contenu complet de la page, le contenu qui dépasse le cadre sera coupé.

Nous devons donc mettre un div enveloppant l'iframe et gérer l'événement de défilement.

<style>
.demo-iframe-holder {
  width: 500px;
  height: 500px;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

.demo-iframe-holder iframe {
  height: 100%;
  width: 100%;
}
</style>

<html>
<body>
    <div class="demo-iframe-holder">
        <iframe src="content.html" />
    </div>
</body>
</html>

les références:

https://davidwalsh.name/scroll-iframes-ios

Comment obtenir un IFrame pour être réactif dans iOS Safari?

J'espère que ça aide.

11
Freya Yu