모바일 Safari에서 iFrame 표시

iOS 기기에서 Safari를 사용하여 모바일 웹 애플리케이션에 iFrame을 삽입하려고 하면 한 가지 일반적인 문제가 발생합니다. 즉, iFrame의 크기를 다음으로 제한하는 것입니다. iPhone 화면에 맞게. iFrame 요소 내의 높이 및 너비 속성은 효과가 없는 경우가 많습니다.

그러나 간단한 해결책은 iFrame을 div 요소 내에 포함시키는 것입니다. 이를 통해 iFrame 크기를 제어할 수 있지만 iFrame 내에서 스크롤할 수 없다는 새로운 문제가 발생합니다.

이 문제를 해결하려면 다음 단계를 실행하세요.

1. 지정된 높이와 너비를 가진 div에 iFrame을 래핑하여 크기를 제한합니다.
2. iFrame 콘텐츠 내에서 JavaScript를 구현하여 둘러싸는 div와 통신합니다. parent.
3. iFrame 본문에 터치 이벤트 리스너를 추가하여 터치 이벤트를 캡처하고 그에 따라 부모의 스크롤 위치를 업데이트합니다.

다음은 달성하기 위한 JavaScript 및 HTML 코드의 예입니다. 이:

// 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);

iFrame 콘텐츠를 제어하지 않는 경우 대신 오버레이를 구현할 수 있습니다. 그러나 이 솔루션은 스크롤 외에는 iFrame 콘텐츠와의 상호 작용을 허용하지 않습니다.