Mobile Safari에서 스크롤링을 활성화하고 iFrame 크기를 제어하는 ​​방법은 무엇입니까?

모바일 Safari에서 iFrame 디스플레이 문제 극복

iFrame을 모바일 웹 애플리케이션에 통합하려고 할 때 어려움을 겪는 것은 드문 일이 아닙니다. 크기를 제어하고 그 안에서 스크롤을 가능하게 합니다.

제한된 크기

기대와는 달리 iFrame 요소의 높이 및 너비 속성 설정만으로는 크기를 제한하지 않습니다. 아이폰 화면으로. 대신 div 요소 내에 포함하면 효과적인 크기 억제가 가능합니다.

스크롤 기능 활성화

그러나 div 제약 조건을 도입하면 iFrame 내에서 스크롤이 비활성화됩니다. 이 문제를 해결하려면 다음 단계를 수행할 수 있습니다.

iframe 콘텐츠 내에서:

• 스크롤을 시작하기 위해 상위 창과 통신하는 JavaScript 함수를 구현합니다. 터치 이벤트 기반.

상위 창(iframe 외부):

• iframe 콘텐츠에 JavaScript 코드를 삽입하세요.
• iFrame을 포함하도록 스크롤 가능한 div를 정의합니다. 터치 이벤트가 감지되면 스크롤 위치 조정을 계산하고 그에 따라 div의 scrollTop 또는 scrollLeft 속성을 업데이트합니다.

예제 코드:

JavaScript (iframe 콘텐츠):

setTimeout(function() {
    var startY = 0, startX = 0;
    var b = document.body;
    b.addEventListener('touchstart', function(event) {
        parent.window.scrollTo(0, 1); // Trigger parent scrolling.
        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 내에서 제한된 크기와 스크롤이 모두 가능합니다.

iOS 6 업데이트 참고:

플랫폼 변경으로 인해 이 솔루션이 iOS 6에서 작동하지 않을 수 있다는 점은 주목할 만합니다. Remote Web Inspector도 더 이상 사용할 수 없으므로 기기의 JavaScript 문제를 디버그하기가 어렵습니다.

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