Mobile Safari에서 iFrame을 올바르게 표시하는 방법은 무엇입니까?

Mobile Safari에서 iFrame을 올바르게 표시

모바일 웹 애플리케이션에서는 iFrame을 표시할 때, 특히 크기를 제한하고 부드러운 스크롤을 허용하는 데 있어 종종 문제가 발생합니다. 그 안에. 이 문서에서는 iFrame을 제한하기 위한 효과적인 솔루션을 탐색하면서 이 문제를 다룹니다.

문제

제공된 코드 조각에서 알 수 있듯이 iFrame 요소에 높이 및 너비 속성을 추가합니다. 효과가 없습니다. iFrame을 div에 포함하면 제약이 허용되지만 iFrame 내에서 스크롤이 방지됩니다.

해결책

모바일 Safari에서 효과적인 iFrame 표시를 위해 다음 접근 방식을 사용할 수 있습니다. 고용됨:

• div 내에 iFrame을 넣습니다. (#scroller).
• iFrame 콘텐츠 내에 JavaScript를 구현하여 스크롤 이벤트를 상위 항목에 전달합니다. 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>

div 내에 iFrame 포함 지정된 JavaScript를 구현하면 개발자는 모바일 Safari에서 iFrame을 적절하게 표시하여 크기 제약과 문제를 모두 해결할 수 있습니다. 스크롤 요구 사항.

위 내용은 Mobile Safari에서 iFrame을 올바르게 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!