iOS Safari iframe'de demirlemeye kaymıyor

iframe sayfasındaki bir HTML sayfam var, bu sayede içerikleri yüklendikten sonra belirli bir konuma kaydırmam gerekiyor. Örneğim iOS Safari hariç çoğu tarayıcıda iyi çalışıyor. Bu gerçekten ihtiyacım olan şey. İlk sayfa yüklemesinde iOS Safari'de çalışmaya eğilimlidir, ancak genel olarak, sonradan yenilenen iframe içeriğinin üst kısmına kaydırılan tüm yenilemeler.iOS Safari iframe'de demirlemeye kaymıyor

Yönlendirmelerin, #anchorname'un düşmesine neden olduğu sorunlar hakkında bilgi okudum, ancak bu durumda olan bitmiyor.

Gerçek iframe içeriği ve ana sayfa farklı etki alanlarındadır. iframe'un içeriğini etkileyebilirim, ancak üzerinde kontrol sahibi değilim. Aynı zamanda başka amaçlar için de kullanılıyor, bu yüzden buna müdahale edebilecek özel bir şey yapmak için sınırlı bir yeteneğe sahip olacağım. Burada

Canlı bağlantı: Burada https://s3.amazonaws.com/ios-iframe-test/iframe_test.html

ebeveyn içeriği:

<!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>

Ve burada iframe içeriği:

<!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>

kaynak

2016-10-28 roy

Safari, iframe'lerde kaydırma yaparak birçok sorun içeriyor. Bir JS çözümü kullanabilir misiniz? –

Bu bir iOS Safari hata sayede kaynaklanmaktadır iframe içeriğinin yüksekliğine genişler.

document.querySelector('iframe').offsetHeight

çözüm position: fixed kabın içine içerik yerleştirerek ve ilerlemek için izin vererek iframe vücudun yüksekliğini azaltmaktır: Bu kullanarak Safari masaüstü ayıklayıcısını ve çalışan doğrulayabilir.

Örneğin, bir <main> etiketine vücudun içeriğini yerleştirin ve stili ayarlamak şöyle:

<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>

Bu Safari söyler iframe vücut onu içeren sayfayla aynı yükseklikte, ama onun içerik kaydırılabilir. Çapaların şimdi çalışacak.

kaynak

2017-07-14 23:33:02

iOS Safari iframe'de demirlemeye kaymıyor

cevap

İlgili konular