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ソリューションを使用できますか？ –

これはiOSのSafariのバグとなるためですiframeはコンテンツの高さに展開されます。あなたは、Safariのデスクトップデバッガおよび実行を使用してこれを確認することができます

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でアンカーにスクロールしない

答えて

関連する問題