How to Properly Display an iFrame in Mobile Safari?

Properly Displaying an iFrame in Mobile Safari

Mobile web applications often encounter challenges when displaying iFrames, specifically in restricting their size and allowing smooth scrolling within them. This article addresses this issue, exploring an effective solution for constraining iFrames.

The Issue

As the provided code snippet demonstrates, adding height and width attributes to the iFrame element has no effect. Encasing the iFrame in a div allows for constraint, but prevents scrolling within the iFrame.

The Solution

For effective iFrame display in mobile Safari, the following approach can be employed:

• Encase the iFrame within a div (#scroller).
• Implement JavaScript within the iFrame content to communicate scrolling events to the parent div.

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><p>By encompassing the iFrame within a div and implementing the specified JavaScript, developers can properly display iFrames in mobile Safari, addressing both size constraints and scrolling requirements.</p></div>

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