Comment activer le défilement et contrôler les dimensions iFrame dans Mobile Safari ?

Surmonter les défis d'affichage d'iFrame dans Mobile Safari

Lorsque vous essayez d'incorporer un iFrame dans une application Web mobile, il n'est pas rare de rencontrer des difficultés dans contrôler ses dimensions et permettre le défilement à l'intérieur.

Dimensions contraintes

Contrairement aux attentes, la définition des attributs de hauteur et de largeur de l'élément iFrame ne limitera pas à elle seule sa taille. à l'écran de l'iPhone. Au lieu de cela, l'inclure dans un élément div permet un confinement efficace de la taille.

Activation de la fonctionnalité de défilement

Cependant, l'introduction de la contrainte div désactive le défilement dans l'iFrame. Pour résoudre ce problème, les étapes suivantes peuvent être suivies :

Dans le contenu iframe :

• Implémentez une fonction JavaScript qui communique avec la fenêtre parent pour lancer le défilement basé sur des événements tactiles.

Fenêtre parent (en dehors de l'iframe) :

• Insérez le code JavaScript dans le contenu de l'iframe.
• Définissez un div déroulant pour entourer l'iFrame. Lorsqu'un événement tactile est détecté, calculez l'ajustement de la position de défilement et mettez à jour les propriétés scrollTop ou scrollLeft du div en conséquence.

Exemple de code :

JavaScript (contenu iframe) :

setTimeout(function() {
    var startY = 0, startX = 0;
    var b = document.body;
    b.addEventListener('touchstart', function(event) {
        parent.window.scrollTo(0, 1); // Trigger parent scrolling.
        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);

HTML (fenêtre parent) :

<div>

Cette approche permet à la fois des dimensions contraintes et un défilement dans l'iFrame dans Mobile Safari.

Remarque sur la mise à jour iOS 6 :

Il est à noter que cette solution peut ne pas fonctionner avec iOS 6 en raison de modifications apportées à la plate-forme. L'inspecteur Web à distance n'est également plus disponible, ce qui rend difficile le débogage des problèmes JavaScript sur l'appareil.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!