How to Make iFrames Scrollable in Mobile Safari?

Displaying iFrames in Mobile Safari: A Complete Guide

Incorporating iFrames into mobile web applications can be a challenge, especially when aiming to restrict their size. Despite setting height and width attributes, the iframe may remain unconstrained.

Solution:

Enclose the iframe within a div to control its dimensions. However, this approach introduces scrolling limitations within the iframe.

To overcome this, implement the following strategy:

• JavaScript Integration: Place a script within the iframe's content.
• Event Handling: Listen for touch events in the iframe.
• Parent Communication: Notify the parent div about scroll events via JavaScript.

Example Code:

JavaScript for the 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 for the parent div:

<div>

Note: When the iframe content is not under your control, you may create an overlay over the iframe and implement similar scrolling functionality. However, interacting with the iframe's content (e.g., clicking links) will be restricted.

Additional Considerations:

• In iOS 6 and above, this solution no longer works, and no reliable alternatives have been discovered yet.
• Remote Web Inspector (Safari's debugging tool) now requires a Mac, making on-device debugging more challenging.

The above is the detailed content of How to Make iFrames Scrollable in Mobile Safari?. For more information, please follow other related articles on the PHP Chinese website!