Wie implementiert man Scrollen innerhalb eines iFrames in Mobile Safari?

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 Abmessungen des iFrames 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 bestimmten Höhe und Breite ein, um seine Abmessungen einzuschränken.
2. Implementieren Sie innerhalb des iFrame-Inhalts JavaScript, um mit dem übergeordneten Div des umschließenden Divs zu kommunizieren.
3. Fügen Sie einen Touch-Ereignis-Listener hinzu den iFrame-Körper, um Berührungsereignisse zu erfassen und die Scrollposition des übergeordneten Elements entsprechend zu aktualisieren.

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

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

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

Das obige ist der detaillierte Inhalt vonWie implementiert man Scrollen innerhalb eines iFrames in Mobile Safari?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!