Wie mache ich iFrames in Mobile Safari scrollbar?

Anzeigen von iFrames in Mobile Safari: Eine vollständige Anleitung

Das Integrieren von iFrames in mobile Webanwendungen kann eine Herausforderung sein, insbesondere wenn deren Einschränkung eingeschränkt werden soll Größe. Trotz der Festlegung von Höhen- und Breitenattributen bleibt der Iframe möglicherweise uneingeschränkt.

Lösung:

Schließen Sie den Iframe in ein Div ein, um seine Abmessungen zu steuern. Dieser Ansatz führt jedoch zu Scroll-Einschränkungen innerhalb des Iframes.

Um dies zu umgehen, implementieren Sie die folgende Strategie:

• JavaScript-Integration: Platzieren Sie ein Skript innerhalb des Iframes Inhalt.
• Ereignisbehandlung: Achten Sie auf Berührungsereignisse im iframe.
• Übergeordnete Kommunikation:Benachrichtigen Sie das übergeordnete Div über Scroll-Ereignisse über JavaScript.

Beispielcode:

JavaScript für den Iframe:

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 für das übergeordnete Element div:

<div>

Hinweis: Wenn der Iframe-Inhalt nicht unter Ihrer Kontrolle steht, können Sie eine Überlagerung über dem Iframe erstellen und eine ähnliche Scrollfunktion implementieren. Die Interaktion mit dem Inhalt des Iframes (z. B. Klicken auf Links) wird jedoch eingeschränkt.

Zusätzliche Überlegungen:

• In iOS 6 und höher ist diese Lösung Nr funktioniert nicht mehr und es wurden noch keine zuverlässigen Alternativen entdeckt.
• Remote Web Inspector (Safari's Debugging Tool) erfordert jetzt einen Mac, was das Debuggen auf dem Gerät schwieriger macht.

Das obige ist der detaillierte Inhalt vonWie mache ich iFrames in Mobile Safari scrollbar?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!