Comment implémenter le défilement dans un iFrame sur Mobile Safari ?

Affichage des iFrames dans Mobile Safari

Lorsque vous tentez d'intégrer un iFrame dans une application Web mobile à l'aide de Safari sur des appareils iOS, un défi courant se pose : limiter les dimensions de l'iFrame à s'adapte à l'écran de l'iPhone. Les attributs de hauteur et de largeur au sein de l'élément iFrame n'ont souvent aucun effet.

Cependant, une solution simple consiste à enfermer l'iFrame dans un élément div. Cela permet de contrôler la taille de l'iFrame, mais cela soulève un nouveau problème : l'impossibilité de faire défiler l'iFrame.

Pour résoudre ce problème, exécutez les étapes suivantes :

1. Enveloppez l'iFrame dans un div avec une hauteur et une largeur spécifiées pour limiter ses dimensions.
2. Dans le contenu iFrame, implémentez JavaScript pour communiquer avec le englobant le parent du div.
3. Ajoutez un écouteur d'événement tactile au corps de l'iFrame pour capturer les événements tactiles et mettre à jour la position de défilement du parent en conséquence.

Vous trouverez ci-dessous un exemple de code JavaScript et HTML. pour y parvenir :

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

<!-- HTML -->
<div>

Veuillez noter que si vous ne contrôlez pas le contenu iFrame, vous pouvez implémenter un superposer à la place. Cependant, cette solution ne permettra pas d'interagir avec le contenu de l'iFrame, hormis le défilement.

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!