Wie aktiviere ich das Scrollen und steuere die iFrame-Abmessungen in Mobile Safari?

Herausforderungen bei der iFrame-Anzeige in Mobile Safari überwinden

Beim Versuch, einen iFrame in eine mobile Webanwendung zu integrieren, stößt man nicht selten auf Schwierigkeiten Steuern Sie seine Abmessungen und ermöglichen Sie das Scrollen darin.

Eingeschränkt Abmessungen

Entgegen den Erwartungen wird durch das Festlegen der Höhen- und Breitenattribute des iFrame-Elements allein dessen Größe nicht auf den iPhone-Bildschirm beschränkt. Stattdessen ermöglicht das Einschließen in ein div-Element eine effektive Größenbeschränkung.

Scroll-Funktionalität aktivieren

Durch die Einführung der div-Einschränkung wird jedoch das Scrollen innerhalb des iFrame deaktiviert. Um dieses Problem zu beheben, können die folgenden Schritte unternommen werden:

Innerhalb des Iframe-Inhalts:

• Implementieren Sie eine JavaScript-Funktion, die mit dem übergeordneten Fenster kommuniziert, um das Scrollen zu initiieren basierend auf Berührungsereignissen.

Übergeordnetes Fenster (außerhalb des iframe):

• Fügen Sie den JavaScript-Code in den Iframe-Inhalt ein.
• Definieren Sie ein scrollbares Div, um den iFrame einzuschließen. Wenn ein Berührungsereignis erkannt wird, berechnen Sie die Anpassung der Bildlaufposition und aktualisieren Sie die scrollTop- oder scrollLeft-Eigenschaften des Div entsprechend.

Beispielcode:

JavaScript (Iframe-Inhalt):

setTimeout(function() {
    var startY = 0, startX = 0;
    var b = document.body;
    b.addEventListener('touchstart', function(event) {
        parent.window.scrollTo(0, 1); // Trigger parent scrolling.
        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 (parent Fenster):

<div>

Dieser Ansatz ermöglicht sowohl eingeschränkte Abmessungen als auch das Scrollen innerhalb des iFrames in Mobile Safari.

iOS 6 Update Hinweis:

Es ist zu beachten, dass diese Lösung aufgrund von Änderungen in der Plattform möglicherweise nicht mit iOS 6 funktioniert. Remote Web Inspector ist ebenfalls nicht mehr verfügbar, was es schwierig macht, JavaScript-Probleme auf dem Gerät zu beheben.

Das obige ist der detaillierte Inhalt vonWie aktiviere ich das Scrollen und steuere die iFrame-Abmessungen in Mobile Safari?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!