Comment rendre les iFrames défilables dans Mobile Safari ?

Affichage des iFrames dans Mobile Safari : un guide complet

L'intégration des iFrames dans les applications Web mobiles peut être un défi, en particulier lorsque l'on vise à restreindre leur taille. Malgré la définition des attributs de hauteur et de largeur, l'iframe peut rester sans contrainte.

Solution :

Entourez l'iframe dans un div pour contrôler ses dimensions. Cependant, cette approche introduit des limitations de défilement au sein de l'iframe.

Pour surmonter ce problème, mettez en œuvre la stratégie suivante :

• Intégration JavaScript : Placez un script dans l'iframe. contenu.
• Gestion des événements : Écoutez les événements tactiles dans le iframe.
• Communication parent : Informez le div parent des événements de défilement via JavaScript.

Exemple de code :

JavaScript pour l'iframe :

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);

HTML pour le parent div :

<div>

Remarque : Lorsque le contenu de l'iframe n'est pas sous votre contrôle, vous pouvez créer une superposition sur l'iframe et implémenter une fonctionnalité de défilement similaire. Cependant, l'interaction avec le contenu de l'iframe (par exemple, en cliquant sur des liens) sera restreinte.

Considérations supplémentaires :

• Dans iOS 6 et supérieur, cette solution ne ne fonctionne plus et aucune alternative fiable n'a encore été découverte.
• Remote Web Inspector (le débogage de Safari outil) nécessite désormais un Mac, ce qui rend le débogage sur l'appareil plus difficile.

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!