How to Enable Scrolling and Control iFrame Dimensions in Mobile Safari?

Overcoming iFrame Display Challenges in Mobile Safari

When attempting to incorporate an iFrame into a mobile web application, it's not uncommon to encounter difficulties in controlling its dimensions and enable scrolling within it.

Constrained Dimensions

Contrary to expectations, setting the height and width attributes of the iFrame element alone won't restrict its size to the iPhone screen. Instead, enclosing it within a div element allows for effective size containment.

Enabling Scroll Functionality

However, introducing the div constraint disables scrolling within the iFrame. To address this, the following steps can be taken:

Within the iframe content:

• Implement a JavaScript function that communicates with the parent window to initiate scrolling based on touch events.

Parent window (outside the iframe):

• Insert the JavaScript code into the iframe content.
• Define a scrollable div to enclose the iFrame. When a touch event is detected, calculate the scroll position adjustment and update the div's scrollTop or scrollLeft properties accordingly.

Example Code:

JavaScript (iframe content):

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 window):

<div>

This approach allows for both constrained dimensions and scrolling within the iFrame in Mobile Safari.

iOS 6 Update Note:

It's noteworthy that this solution may not work with iOS 6 due to changes in the platform. Remote Web Inspector is also no longer available, making it challenging to debug JavaScript issues on the device.

The above is the detailed content of How to Enable Scrolling and Control iFrame Dimensions in Mobile Safari?. For more information, please follow other related articles on the PHP Chinese website!