모바일 Safari에서 iFrame을 스크롤 가능하게 만드는 방법은 무엇입니까?

Mobile Safari에서 iFrame 표시: 전체 가이드

iFrame을 모바일 웹 애플리케이션에 통합하는 것은 어려울 수 있으며, 특히 크기. 높이 및 너비 속성을 설정했음에도 불구하고 iframe은 제한되지 않은 상태로 유지될 수 있습니다.

해결책:

iframe을 div 내에 포함하여 크기를 제어하세요. 그러나 이 접근 방식은 iframe 내에서 스크롤 제한을 초래합니다.

이를 극복하려면 다음 전략을 구현하십시오.

• JavaScript 통합: iframe의 content.
• 이벤트 처리: iframe.
• 상위 통신: JavaScript를 통해 상위 div에 스크롤 이벤트를 알립니다.

예제 코드:

iframe용 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:

<div>

참고: iframe 콘텐츠를 제어할 수 없는 경우 iframe 위에 오버레이를 만들고 유사한 스크롤 기능을 구현할 수 있습니다. 그러나 iframe 콘텐츠와의 상호 작용(예: 링크 클릭)은 제한됩니다.

추가 고려 사항:

• iOS 6 이상에서는 이 솔루션이 더 오래 작동하며 아직 신뢰할 수 있는 대안이 발견되지 않았습니다.
• Remote Web Inspector (Safari의 디버깅 도구)에는 이제 Mac이 필요하므로 기기 내 디버깅이 더욱 어려워집니다.

위 내용은 모바일 Safari에서 iFrame을 스크롤 가능하게 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!