IFrame scrollt auf Desktop-Browsern, aber nicht auf dem iPhone

Unten ist ein Beispielcode, der einen iframe in eine Seite lädt und dann scrollt der iframe-Code selbst mit JavaScript-Aufruf - window.scrollTo (0,170);IFrame scrollt auf Desktop-Browsern, aber nicht auf dem iPhone

Alles funktioniert gut auf Desktop-Browsern wie Mozilla, Chrome, Safari und ie, aber wenn ich es auf einem IPhone versuche, funktioniert der Scroll-Code (window.scrollTo (0,170);) nicht. Alle Dateien befinden sich auf demselben Server.

Wenn es funktioniert, werden Sie sehen, dass die Seite geladen und bis Zeile 9 nach oben gescrollt wurde. Wenn es nicht funktioniert, lädt die Seite, aber nichts wird gescrollt.

Irgendwelche Ideen, was ich falsch mache oder warum es nicht funktioniert? Vielen Dank im Voraus für Ihr Feedback :)

ifparent.html

<html> 
    <head> 
     <meta name="viewport" content="width=device-width"> 

     <style> 
      html, body { 
       margin: 0; 
       padding: 0; 
       height: 100%; 
       width: 100%; 
      } 

      body { 
       position: relative; 
       background: #f0f0f0; 
      } 

      .frame_holder { 
       position: absolute; 
       top: 5px; 
       bottom: 5px; 
       left: 5px; 
       right: 5px; 
       background: #ffffff; 
       height: 75%; 

      } 

      .scroll_frame { 
       overflow: auto; 
       overflow-x: hidden; 
       -webkit-overflow-scrolling:touch; 
       width: 100%; 
       height: 100%; 
       border: 1px solid #e0e0e0; 
      } 

      .my_frame { 
       width: 100%; 
       height: 100%; 
       border: none; 
       vertical-align: top; 
      } 

      .hidden { 
       display: none; 
      } 
     </style> 
    </head> 
    <body> 

     <div class="frame_holder"> 
      <div id="scroll_frame" class="scroll_frame"> 
       <iframe class="my_frame" src="iframe.html"></iframe> 
      </div> 
     </div> 
    </body> 
</html> 

<script type="text/javascript"> 

</script>

iframe.html

<html> 
    <head> 
     <title>IFRAME</title> 
    </head> 

    <body onload="scroll_window()"> 
     1 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     2 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     3 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     4 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     5 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     6 ELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     7 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     8 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     9 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     10 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     11 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     12 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     13 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     14 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     15 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     16 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     17 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     18 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     19 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     20 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     21 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     22 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     23 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     24 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     25 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     26 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     27 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     28 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     29 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     30 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     31 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     32 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 

     1 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     2 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     3 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     4 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     5 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     6 ELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     7 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     8 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     9 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     10 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     11 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     12 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     13 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     14 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     15 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     16 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     17 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     18 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     19 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     20 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     21 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     22 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     23 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     24 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     25 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     26 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     27 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     28 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     29 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     30 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     31 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     32 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 

     1 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     2 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     3 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     4 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     5 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     6 ELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     7 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     8 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     9 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     10 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     11 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     12 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     13 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     14 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     15 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     16 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     17 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     18 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     19 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     20 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     21 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     22 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     23 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     24 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     25 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     26 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     27 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     28 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     29 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     30 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     31 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     32 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 

     1 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     2 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     3 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     4 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     5 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     6 ELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     7 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     8 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     9 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     10 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     11 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     12 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     13 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     14 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     15 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     16 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     17 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     18 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     19 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     20 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     21 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     22 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     23 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     24 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     25 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     26 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     27 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     28 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     29 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     30 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     31 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 
     32 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br> 

    </body> 
</html> 

<script type="text/javascript"> 
    function scroll_window() { 
     window.scrollTo(0,170); 
    } 
</script>

Quelle

2016-03-18 Tony

konnte ich die Lösung für dieses Problem finden, so habe ich beschlossen, poste es für den Fall, dass jemand anderes auf dieses Problem stößt. Im Folgenden sind die Änderungen so, dass das Scrollen auch in iOS-Browsern funktioniert.

In ifparent.html fügen über den Code unten:

<script type="text/javascript"> 
    window.onload = scroll_window;  

    function scroll_window() { 

    //If IOS the scroll bar seemes to bee assigned to the container div (scroll_frame) in the parent window. 
    //So you need to scroll scroll_frame in the parent window. This will scroll to line 16. 
    var objDiv = document.getElementById("scroll_frame"); 
    objDiv.scrollTop = 500;  
    } 
</script>

Wenn iOS scheint die Bildlaufleiste auf den Behälter div (scroll_frame) in dem übergeordneten Fenster zugewiesen werden. Daher müssen Sie im übergeordneten Fenster den Bildlauf (Bildlauf) durchblättern. Dies wird blättern 26.

Wenn Windows- oder Mac OS, die Bildlaufleiste zur Linie scheint in der iframe auf das Fensterelement zugeordnet werden. Sie müssen also das Iframe-Fenster innerhalb des Iframes scrollen. Dies wird zu Zeile 9 scrollen.

Quelle

2016-03-20 15:40:48 Tony

IFrame scrollt auf Desktop-Browsern, aber nicht auf dem iPhone

Antwort

Verwandte Themen