Anzeigen von iFrames in Mobile Safari

Beim Versuch, einen iFrame in eine mobile Webanwendung mit Safari auf iOS-Geräten einzubetten, entsteht eine häufige Herausforderung: die Beschränkung der iFrame-Abmessungen auf Passen Sie den iPhone-Bildschirm an. Höhen- und Breitenattribute innerhalb des iFrame-Elements haben oft keine Auswirkung.

Eine einfache Lösung besteht jedoch darin, den iFrame in ein div-Element einzuschließen. Dies ermöglicht die Kontrolle der Größe des iFrames, wirft jedoch ein neues Problem auf: die Unfähigkeit, innerhalb des iFrames zu scrollen.

Um dieses Problem zu beheben, führen Sie die folgenden Schritte aus:

1. Wickeln Sie den iFrame in ein Div mit einer angegebenen Höhe und Breite ein, um seine Abmessungen einzuschränken.
2. Implementieren Sie innerhalb des iFrame-Inhalts JavaScript, um mit dem Einschließenden zu kommunizieren divs übergeordnetes Element.
3. Fügen Sie einen Berührungsereignis-Listener zum iFrame-Körper hinzu, um Berührungsereignisse zu erfassen und die Bildlaufposition des übergeordneten Elements entsprechend zu aktualisieren.

Unten finden Sie ein Beispiel für den JavaScript- und HTML-Code erreichen Sie dies:

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

Bitte beachten Sie, dass Sie stattdessen ein Overlay implementieren können, wenn Sie den iFrame-Inhalt nicht kontrollieren. Diese Lösung ermöglicht jedoch keine Interaktion mit dem iFrame-Inhalt, abgesehen vom Scrollen.