comment afficher correctement un iFrame dans un safari mobile

Question

J'essaie d'afficher un iframe dans mon application Web mobile, mais je ne parviens pas à limiter la taille de l'iframe aux dimensions de l'écran de l'iPhone. Les attributs height et width de l'élément iframe semblent n'avoir aucun effet, étrangement. L’entourer d’une div réussit à la contraindre, mais je ne parviens pas à faire défiler l’iframe.

Est-ce que quelqu'un a déjà abordé les iframes lors d'un safari sur mobile? Des idées par où commencer?

Answer 1

Ouais, vous ne pouvez pas contraindre l'iframe lui-même avec la hauteur et la largeur. Vous devriez mettre une div autour d'elle. Si vous contrôlez le contenu de l'iframe, vous pouvez mettre un peu de JS dans le contenu de l'iframe qui dira le parent pour faire défiler la div lorsque l'événement tactile est reçu.

comme ceci:

Le JS:

setTimeout(function () {
var startY = 0;
var startX = 0;
var b = document.body;
b.addEventListener('touchstart', function (event) {
    parent.window.scrollTo(0, 1);
    startY = event.targetTouches[0].pageY;
    startX = event.targetTouches[0].pageX;
});
b.addEventListener('touchmove', function (event) {
    event.preventDefault();
    var posy = event.targetTouches[0].pageY;
    var h = parent.document.getElementById("scroller");
    var sty = h.scrollTop;

    var posx = event.targetTouches[0].pageX;
    var stx = h.scrollLeft;
    h.scrollTop = sty - (posy - startY);
    h.scrollLeft = stx - (posx - startX);
    startY = posy;
    startX = posx;
});
}, 1000);

Le code HTML:

<div id="scroller" style="height: 400px; width: 100%; overflow: auto;">
<iframe height="100%" id="iframe" scrolling="no" width="100%" id="iframe" src="url" />
</div>

Si vous n'avez pas de contrôle sur le contenu de l'iframe, vous pouvez utiliser une superposition sur l'iframe dans une manière similaire, mais alors vous ne pouvez pas interagir avec le contenu de l'iframe autres que pour le faire défiler, - de sorte que vous ne pouvez pas, par exemple, de cliquer sur des liens dans l'iframe.

Il a utilisé pour être que vous pouvez utiliser deux doigts pour faire défiler dans une iframe, mais qui ne fonctionne plus.

Mise à jour: iOS 6 a cassé cette solution pour nous. J'ai été de tenter d'obtenir une nouvelle solution pour elle, mais rien n'a fonctionné encore. En outre, il n'est plus possible de débogage javascript sur le périphérique depuis qu'ils ont introduit à Distance de l'Inspecteur Web, ce qui nécessite un Mac à utiliser.

Answer 2

Si le contenu de l'iFrame n'est pas le vôtre alors la solution ci-dessous ne fonctionnera pas.

Avec Android, tout ce que vous devez faire est d'entourer l'iframe avec un DIV et de définir la hauteur de la div du document.documentElement.clientHeight. IOS, cependant, est un animal différent. Bien que je n'ai pas encore essayé de Sharon de la solution, il ne sembler une bonne solution. J'ai trouvé une solution plus simple, mais il ne fonctionne qu'avec IOS 5.+.

Entourez votre élément iframe avec un DIV (appelons cela scroller), réglez la hauteur de la DIV et assurez-vous que le nouveau DIV a la suite de style:

$('#scroller').css({'overflow' : 'auto', '-webkit-overflow-scrolling' : 'touch'});

Seul, cela va fonctionner, mais vous verrez que dans la plupart des implémentations du contenu dans l'iframe se vide lors du défilement et est fondamentalement inutile. Ma compréhension est que ce comportement a été signalé comme un bug à Apple dans le début de l'iOS 5.0. Pour contourner ce problème, trouver l'élément du corps dans l'iframe et ajoutez -webkit-transform', 'translate3d(0, 0, 0) comme suit:

$('#contentIframe').contents().find('body').css('-webkit-transform', 'translate3d(0, 0, 0)');

Si votre application ou de l'iframe est lourd sur l'utilisation de la mémoire, vous pouvez obtenir un hitchy de défilement pour lesquelles vous pourriez avoir besoin d'utiliser de Sharon solution.

Answer 3

Cela ne fonctionne que si vous contrôlez la page externe et la page iframe.

Sur la page extérieure, créez les iframe adhérents.

 <iframe src="" height=200 scrolling=no></iframe>
 

Sur la page iframe, ajoutez ceci.

 <!doctype html>
...
<style>
html, body {height:100%; overflow:hidden}
body {overflow:auto; -webkit-overflow-scrolling:touch}
</style>
 

Cela fonctionne parce que les navigateurs modernes utilisent html pour déterminer la hauteur. Nous lui attribuons donc une hauteur fixe et transformons le body en nœud défilable.

Answer 4

J'ai mis le code de @ Sharon dans ce qui suit, ce qui fonctionne pour moi sur l'iPad avec défilement à deux doigts. La seule chose que vous devriez changer pour que cela fonctionne est l'attribut src de l'iframe (j'ai utilisé un document PDF).

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Pdf Scrolling in mobile Safari</title>
</head>
<body>
<div id="scroller" style="height: 400px; width: 100%; overflow: auto;">
<iframe height="100%" id="iframe" scrolling="no" width="100%" id="iframe" src="data/testdocument.pdf" />
</div>
<script type="text/javascript">
    setTimeout(function () {
        var startY = 0;
        var startX = 0;
        var b = document.body;
        b.addEventListener('touchstart', function (event) {
            parent.window.scrollTo(0, 1);
            startY = event.targetTouches[0].pageY;
            startX = event.targetTouches[0].pageX;
        });
        b.addEventListener('touchmove', function (event) {
            event.preventDefault();
            var posy = event.targetTouches[0].pageY;
            var h = parent.document.getElementById("scroller");
            var sty = h.scrollTop;

            var posx = event.targetTouches[0].pageX;
            var stx = h.scrollLeft;
            h.scrollTop = sty - (posy - startY);
            h.scrollLeft = stx - (posx - startX);
            startY = posy;
            startX = posx;
        });
    }, 1000);
    </script>
</body>
</html>
 

Answer 5

Une autre option consiste à extraire le contenu de l'iframe et le mettre dans un div. Encore une fois, seulement si le contenu est sur le même domaine.

Voici un article que j'ai écrit sur le sujet:

http://www.flexmls.com/developers/2011/04/13/ipad-and-single-finger-scrolling-in-flexmls/

L'iPad essaye de développer l'iframe pour correspondre au contenu de ce qui est à l'intérieur. Si vous définissez scrolling="no", vous pouvez provoquer l'iframe de respecter les dimensions appropriées. Ceci est similaire à overflow:hidden. Toutefois, il est inutile, pour la plupart, parce que vous avez encore ne sera pas en mesure de la faire défiler.

J'ai utilisé le scrolling="no" la méthode sur une page où je voulais m'assurer que les dimensions d'un iframe resté correctement ajusté pour s'adapter à l'ipad taille de l'écran. Le contenu à l'intérieur, il a également fait la même chose, donc je n'ai pas à vous soucier de défilement. Elle a effectivement sauvé mon cul, mais parce que sans elle, à l'aide de jQuery(window).la hauteur va donner la hauteur de l'iframe, au lieu de la hauteur de la fenêtre. Ceci est particulièrement utile lorsque vous traitez avec changement d'orientation.

Edit: si seulement ils encore autorisés à deux doigts de défilement. Il y a une chance scrolling="no" pourrait avoir fonctionné parfaitement! (a tout hasard que scrolling="no" n'est pas aussi désactiver à deux doigts de défilement)