Scrolling iframe auf iOS ist gelöst, aber die iframe Seite Anzeige unvollständig

Ich versuche, ein iframe auf iOS zu blättern, und es gelang mir, es Scrollen gut, Referenz:Scrolling iframe auf iOS ist gelöst, aber die iframe Seite Anzeige unvollständig

http://home.jejaju.com/play/iframe-scroll.html

http://areaaperta.com/nicescroll/demo.html

ABER, haben alle Lösungen ein Problem: die Iframe Seite wird nicht vollständig angezeigt ...

Ich testete auf meinem iPhone und iPad, die Iframe-Seite zeigt abgehackt. enter image description here

eine Idee?

Beispiel:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=9;FF=3;chrome=1;OtherUA=4" /> 
    <meta name="viewport" content="width=device-width, user-scalable=no" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.js"></script> 
    <script type="text/javascript"> 
    $(function(){ 
     if (/iPhone|iPod|iPad/.test(navigator.userAgent)) 
      $('iframe').wrap(function(){ 
       var $this = $(this); 
       return $('<div />').css({ 
        width: $this.attr('width'), 
        height: $this.attr('height'), 
        overflow: 'scroll', 
        '-webkit-overflow-scrolling': 'touch' 
       }); 
      }); 
    }) 
    </script> 
    <title>Untitled</title> 
</head> 
<body> 
stuff 
<div> 
<iframe src="iframe-scroll-long.html" height="500" width="500"></iframe> 
</div> 
more stuff 
</body> 
</html>

Quelle

2013-01-06 Jove

Kann ich Ihren Code sehen? –

Mein Code ist der gleiche wie http://home.jejaju.com/play/iframe-scroll.html, Sie können diese Seite auf dem iPad sehen, die iframe-Seitenanzeige abgehackt, meine iOS-Version ist 5.1.1. – Jove

Okay, aber ich kann die Quelle nicht anzeigen, können Sie den Code von dieser Webseite bitte posten? –

fand ich eine Kombination von div mit "absolutem" Stil und nicescroll fix choppines tun.

Sie müssen nicescroll auf der von iframe geladenen Seite laden. In der gleichen Seite wickelt alle Inhalte mit einem div (mit Stil absolut)

#content { position:absolute; }

lädt nicescroll gewickelten div Inhalt verwenden.

$(document).ready(function() { 
    $("html").niceScroll("#content"); 
    });

Link-Seite Demo, so können Sie den Code überprüfen: http://areaaperta.com/nicescroll/demo/iframe6.html

automatisch mit nativen iOS blättern in anderen Plattform verwendet hat, haben Sie aktiv nicescroll.

Ich habe einen Test auf dem iPad mit iOS 5.1.

Quelle

2013-01-08 20:40:05 InuYaksa

Danke InuYaksa, es ist jetzt perfekt, keine Hackbretter mehr! Danke !! :) – Jove

Hey InuYaksa, könnten Sie bitte Ihre vollständige Lösung posten? Das selbe Problem hat mich verrückt gemacht, aber es scheint, als würde mir etwas Triviales fehlen. Ich versuche, zwei iframes auf einer Seite zu laden und scrollen Probleme. – Mohammad

Versuchen Hinzufügen -webkit-transform:translate3d(0,0,0) zum iframe Stil und alle Elemente innerhalb zur Kraft-Hardware-Beschleunigung - sollte die choppiness reduzieren.

In Haupt-Seite Stil:

iframe { -webkit-transform:translate3d(0,0,0); }

und in iframe style:

p { -webkit-transform:translate3d(0,0,0); }

Quelle

2013-01-07 03:54:57

Danke jc6212, habe ich versucht, aber Hackiness das gleiche, nein reduzieren. – Jove

Ich hatte eine sehr unruhige Animation in einem iframe, die diesen Trick behoben. Alles, was ich tun musste, war es zu dem Element zu animieren geben. Prost. – Greg

Diese Lösung ist ein bisschen wie ein Hack, aber getestet und funktioniert auf iOS fein:

<div style="width: 760px; height: 500px; overflow: scroll !important;-webkit-overflow-scrolling:touch !important;"> 
    <object type="text/html" data="HTTP://YOURPAGE.URL" style="width:1000px; height:10000px;"> 
    </object>  
</div>

Grundsätzlich, da funktioniert gut in einem DIV Scrollen Sie einbetten Ihre Seite Code, um das Objekt-Tag. Das Problem besteht darin, dass Sie aufgrund der gleichen Ursprungsrichtlinie die Abmessungen der Zielseite nicht bestimmen können. Ich fand, dass die Einstellung einer großen Seitengröße perfekt funktioniert (keine Verzögerung oder Unruhe bemerkt ... nur Leerzeichen)

Sie können das Client-Betriebssystem leicht bestimmen und nur diesen Code zu iOS-Geräten hinzufügen.

Quelle

2013-07-25 14:12:16 user2619064

Habe versucht, iscroll, iframe hacks, css tricks ... nichts funktioniert für die Kombination Phonegap + iframe ABER DIESES! BEEINDRUCKEND. VIELEN DANK! – Benny7500

Wir haben diese Lösung eine Weile benutzt, aber sie scheint mit iOS8 aufgehört zu haben. :( – althaus

Ich fand dies ein Problem mit relativ positionierten Inhalt innerhalb des Rahmens. Deaktivieren Sie dieses Verhalten beim Entfernen position: relative;

Quelle

2013-10-29 11:33:21

Scrolling iframe auf iOS ist gelöst, aber die iframe Seite Anzeige unvollständig

Antwort

Verwandte Themen