Comment afficher correctement un iFrame dans Mobile Safari ?

Afficher correctement un iFrame dans Mobile Safari

Les applications Web mobiles rencontrent souvent des difficultés lors de l'affichage des iFrames, notamment en limitant leur taille et en permettant un défilement fluide. en eux. Cet article aborde ce problème en explorant une solution efficace pour contraindre les iFrames.

Le problème

Comme le montre l'extrait de code fourni, l'ajout d'attributs de hauteur et de largeur à l'élément iFrame n'a aucun effet. Enfermer l'iFrame dans un div permet une contrainte, mais empêche le défilement dans l'iFrame.

La solution

Pour un affichage iFrame efficace dans Safari mobile, l'approche suivante peut être employé :

• Encapsuler l'iFrame dans un div (#scroller).
• Implémentez JavaScript dans le contenu iFrame pour communiquer les événements de défilement au div parent.

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>

En englobant le iFrame dans un div et implémentant le JavaScript spécifié, les développeurs peuvent afficher correctement les iFrames dans Safari mobile, en répondant à la fois aux contraintes de taille et aux exigences de 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!