Отображение iFrame в мобильном Safari

При попытке встроить iFrame в мобильное веб-приложение с помощью Safari на устройствах iOS возникает одна распространенная проблема: ограничение размеров iFrame до подходит к экрану iPhone. Атрибуты высоты и ширины внутри элемента iFrame часто не имеют никакого эффекта.

Однако простое решение заключается в заключении iFrame в элемент div. Это позволяет контролировать размер iFrame, но возникает новая проблема: невозможность прокрутки внутри iFrame.

Чтобы решить эту проблему, выполните следующие действия:

1. Оберните iFrame в элемент div с заданной высотой и шириной, чтобы ограничить его размеры.
2. В содержимом iFrame реализуйте JavaScript для взаимодействия с родительским элементом, включающим в себя элемент div.
3. Добавьте прослушиватель событий касания в тело iFrame для захвата событий касания и соответствующего обновления позиции родительской прокрутки.

Ниже приведен пример кода JavaScript и HTML для достижения этой цели:

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

Обратите внимание: если вы не управляете содержимым iFrame, вместо этого вы можете реализовать наложение. Однако это решение не позволит взаимодействовать с содержимым iFrame, кроме прокрутки.