Mostrar iFrames en Mobile Safari

Al intentar incrustar un iFrame dentro de una aplicación web móvil usando Safari en dispositivos iOS, surge un desafío común: restringir las dimensiones del iFrame a Se ajusta a la pantalla del iPhone. Los atributos de alto y ancho dentro del elemento iFrame a menudo no tienen ningún efecto.

Sin embargo, una solución simple consiste en encerrar el iFrame dentro de un elemento div. Esto permite controlar el tamaño del iFrame, pero plantea un nuevo problema: la imposibilidad de desplazarse dentro del iFrame.

Para solucionar este problema, ejecute los siguientes pasos:

1. Envuelva el iFrame en un div con una altura y un ancho específicos para limitar sus dimensiones.
2. Dentro del contenido del iFrame, implemente JavaScript para comunicarse con el adjuntando el div principal.
3. Agregue un detector de eventos táctiles al cuerpo del iFrame para capturar eventos táctiles y actualizar la posición de desplazamiento del padre en consecuencia.

A continuación se muestra un ejemplo del código JavaScript y HTML para lograr esto:

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

Tenga en cuenta que si no controla el contenido del iFrame, puede implementar una superposición. Sin embargo, esta solución no permitirá la interacción con el contenido del iFrame, aparte del desplazamiento.