Exibindo iFrames no Mobile Safari

Ao tentar incorporar um iFrame em um aplicativo web móvel usando o Safari em dispositivos iOS, surge um desafio comum: restringir as dimensões do iFrame para caber na tela do iPhone. Os atributos de altura e largura dentro do elemento iFrame geralmente não têm efeito.

No entanto, uma solução simples consiste em colocar o iFrame dentro de um elemento div. Isso permite o controle do tamanho do iFrame, mas levanta um novo problema: a incapacidade de rolar dentro do iFrame.

Para resolver esse problema, execute as seguintes etapas:

1. Envolva o iFrame em um div com altura e largura especificadas para restringir suas dimensões.
2. No conteúdo do iFrame, implemente JavaScript para se comunicar com o pai do div envolvente.
3. Adicione um ouvinte de evento de toque a o corpo do iFrame para capturar eventos de toque e atualizar a posição de rolagem do pai de acordo.

Abaixo está um exemplo de código JavaScript e HTML para conseguir isso:

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

Observe que se você não controlar o conteúdo do iFrame, poderá implementar uma sobreposição. Porém, esta solução não permitirá interação com o conteúdo do iFrame, além da rolagem.