Mobile Safari의 iFrame 내부에서 스크롤을 구현하는 방법은 무엇입니까?

모바일 Safari에서 iFrame 표시

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

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

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

1. 크기를 제한하려면 높이와 너비가 지정된 div에 iFrame을 래핑하세요.
2. iFrame 콘텐츠 내에서 JavaScript를 구현하여 div의 상위 항목을 포함합니다.
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);

<!-- HTML -->
<div>

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

위 내용은 Mobile Safari의 iFrame 내부에서 스크롤을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!