iOS Safari가 iframe에서 앵커로 스크롤하지 않습니다.

iframe 페이지에 HTML 페이지가 있으며, 내용을로드 할 때 특정 위치로 스크롤해야합니다. 내 예제는 iOS Safari를 제외한 대부분의 브라우저에서 정상적으로 작동합니다. 첫 번째 페이지로드시 iOS Safari에서 작동하는 경향이 있지만 일반적으로 이후에 새로 고침하면 iframe 콘텐츠가 맨 위로 스크롤됩니다.iOS Safari가 iframe에서 앵커로 스크롤하지 않습니다.

리디렉션으로 인해 #anchorname이 삭제되는 문제에 대해 읽었지 만,이 경우에는 진행되지 않습니다.

실제 iframe 콘텐츠 및 기본 페이지가 다른 도메인에 있습니다. iframe의 콘텐츠에 영향을 미칠 수는 있지만 제어 할 수는 없습니다. 그것은 또한 다른 목적을 위해 사용되기 때문에, 나는 그것을 방해 할 수있는 관습을 할 수있는 능력이 제한되어있었습니다. 여기

라이브 링크 : 여기 https://s3.amazonaws.com/ios-iframe-test/iframe_test.html

는 부모 내용입니다 :

<!DOCTYPE html> 
<html> 
    <head> 
    <title>test</title> 
    <meta content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" name="viewport"> 

    <style type="text/css"> 

     #root { 
     position: relative; 
     } 

     #wrapper { 
     height: 300px; 
     width: 300px; 
     overflow-x: hidden; 
     overflow-y: scroll; 
     position: relative; 
     -webkit-overflow-scrolling: touch; 
     } 

     iframe { 
     width: 100%; 
     height: 100%; 
     } 

    </style> 

    </head> 
    <body> 
    <h1>Why won't this iframe scroll to where I want?</h1> 
    <div id="root"> 
     <div id="wrapper"> 
     <iframe src="https://s3.amazonaws.com/ios-iframe-test/iframe_content.html#scrolltome"></iframe> 
     </div> 
    </div> 
    </body> 
</html>

그리고 여기 iframe 내용입니다 :

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
</head> 

<body> 

    <h1>Have some ipsum...</h1> 
    <p> 
    Lorem... (live example has much more here just to make the scrolling apparent) 
    </p> 

    <h1 style="color: red;"> 
    <a name="scrolltome" id="scrolltome">This is where I want to scroll></a> 
    </h1> 

    <p> 
    Lorem... 
    </p> 

</html>

출처

2016-10-28 roy

Safari는 iframe에서 스크롤하는 데 많은 문제가 있습니다. JS 솔루션을 사용할 수 있습니까? –

이 아이폰 OS 사파리 버그 이에 때문이다 iframe은 내용의 높이까지 확장됩니다.

이

document.querySelector('iframe').offsetHeight

이 솔루션은 position: fixed 용기에 콘텐츠를 배치하고 스크롤 할 수 있도록하여 iframe이 본체의 높이를 줄이는 것입니다 : 당신이 사용하는 사파리 데스크탑 디버거 및 실행을 확인할 수 있습니다.

예를 들어, <main> 태그에 몸의 내용을 배치하고 스타일을 설정은 다음과 같습니다 :

<html> 
    <head> 
     <style> 
      main { 
      position: fixed; 
      top: 0; 
      right: 0; 
      bottom: 0; 
      left: 0; 
      padding: 10px; 
      overflow-y: scroll; 
      -webkit-overflow-scrolling: touch; 
      z-index: 1; 
      } 
     </style> 
    </head> 
    <body> 
     <main> 
      <h1>Have some ipsum...</h1> 
      <p>Lorem... (live example has much more here just to make the scrolling apparent)</p> 
      <h1 style="color: red;"> 
      <a name="scrolltome" id="scrolltome">This is where I want to scroll</a> 
      </h1> 
      <p> 
      Lorem... 
      </p> 
     </main> 
    </body> 
    </html>

을이 사파리 알려주는 iframe이 본체가 포함 된 페이지와 같은 높이입니다,하지만 내용을 스크롤 할 수 있습니다. 이제 앵커가 작동합니다.

출처

2017-07-14 23:33:02

iOS Safari가 iframe에서 앵커로 스크롤하지 않습니다.

답변

관련 문제