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 : restreindre 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 contenu englobant. le parent de div.
3. Ajoutez un écouteur d'événements tactiles 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 réaliser ceci :

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

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