स्क्रॉल आइफ्रेम हल किया जाता है, लेकिन आइफ्रेम पेज का प्रदर्शन अधूरा

मैं आईओएस के एक iframe स्क्रॉल करने के लिए कोशिश कर रहा हूँ, और मैं सफल रहा, यह अच्छी तरह से स्क्रॉल है, संदर्भ:स्क्रॉल आइफ्रेम हल किया जाता है, लेकिन आइफ्रेम पेज का प्रदर्शन अधूरा

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

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

आइफ्रेम पेज पूरी तरह से प्रदर्शित नहीं किया जाता ...

मैं अपने iPhone और iPad, iframe पृष्ठ प्रदर्शित करता है अस्थिर पर परीक्षण किया: लेकिन, सब समाधान समस्या आ रही है। enter image description here

किसी भी विचार?

उदाहरण:

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

स्रोत

2013-01-06 Jove

को हटाने मैं अपने कोड देख सकते हैं? –

मेरा कोड http://home.jejaju.com/play/iframe-scroll.html जैसा ही है, आप इस पेज को आईपैड पर देख सकते हैं, आईफ्रेम पेज डिस्प्ले चटपट, मेरा आईओएस संस्करण 5.1.1 है। – Jove

ठीक है, लेकिन मैं स्रोत नहीं देख सकता, क्या आप उस वेबपृष्ठ से कोड पोस्ट कर सकते हैं? –

मैं "पूर्ण" शैली के साथ div का एक संयोजन मिल गया और ठीक choppines कर Nicescroll।

आपको आईफ्रेम द्वारा लोड किए गए पृष्ठ पर nicescroll लोड करना होगा। एक ही पृष्ठ चादर तुम सब एक div (शैली पूर्ण के साथ) के साथ सामग्री

#content { position:absolute; }

लोड nicescroll लिपटे div सामग्री का उपयोग करें।

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

लिंक पेज डेमो के लिए है, तो आप कोड की जांच कर सकते हैं: http://areaaperta.com/nicescroll/demo/iframe6.html

स्वचालित रूप से, आईओएस देशी स्क्रॉल के साथ प्रयोग किया गया है, अन्य मंच में आप nicescroll सक्रिय हो गया।

मेरे पास आईओएस 5.1 के साथ आईपैड पर परीक्षण है।

स्रोत

2013-01-08 20:40:05 InuYaksa

धन्यवाद इनयूयाक्स, यह अभी सही है, कोई और चॉपपिन नहीं! धन्यवाद !! :) – Jove

अरे इनयूयाका, क्या आप अपना पूरा समाधान पोस्ट कर सकते हैं? यह वही समस्या मुझे पागल कर रही है, लेकिन ऐसा लगता है कि मुझे कुछ मामूली याद आ रही है। मैं एक पृष्ठ पर दो आईफ्रेम लोड करने की कोशिश कर रहा हूं और स्क्रॉलिंग समस्याएं कर रहा हूं। – Mohammad

आइफ्रेम शैली और बल हार्डवेयर त्वरण के भीतर सभी तत्वों को -webkit-transform:translate3d(0,0,0) जोड़ने का प्रयास करें - choppiness कम करना चाहिए।

मुख्य पृष्ठ शैली में:

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

और iframe शैली में:

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

स्रोत

2013-01-07 03:54:57

धन्यवाद jc6212, मैंने कोशिश की, लेकिन चपटापन वही नहीं, कोई कमी नहीं। – Jove

मेरे पास एक आईफ्रेम के भीतर एक बहुत ही चंचल एनीमेशन था, जो इस चाल को ठीक कर दिया गया था। मुझे बस इतना करना था कि इसे एनिमेटेड तत्व में जोड़ दिया गया था। चीयर्स। – Greg

यह समाधान एक हैक का एक सा है, लेकिन परीक्षण किया जाता है और iOS पर ठीक काम करता है:

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

असल में, स्क्रॉल एक DIV में ठीक काम करता है के बाद से, आप वस्तु टैग का उपयोग कर अपने पृष्ठ कोड एम्बेड। समस्या यह है कि, उसी मूल नीति के कारण, आप अपने लक्षित पृष्ठ के आयामों को निर्धारित नहीं कर सकते हैं। मैंने पाया कि एक बड़ा पृष्ठ आकार की स्थापना पूरी तरह से व्यावहारिक (कोई देरी या choppyness देखा ... बस रिक्त स्थान)

आप आसानी से ग्राहक ओएस निर्धारित कर सकते हैं और केवल iOS उपकरणों के लिए इस कोड को जोड़ने है।

स्रोत

2013-07-25 14:12:16 user2619064

आईस्कोल, आईफ्रेम हैक्स, सीएसएस चाल की कोशिश की है ... संयोजन के लिए कुछ भी काम नहीं करता फ़ोनगैप + आईफ्रेम लेकिन यह! वाह। धन्यवाद! – Benny7500

हमने थोड़ी देर के लिए इस समाधान का उपयोग किया, लेकिन ऐसा लगता है कि आईओएस 8 के साथ बंद हो गया है। :( – althaus

मुझे यह फ्रेम के अंदर अपेक्षाकृत तैनात सामग्री के साथ एक समस्या माना गया। इस व्यवहार से छुटकारा पाएं position: relative;

स्रोत

2013-10-29 11:33:21

स्क्रॉल आइफ्रेम हल किया जाता है, लेकिन आइफ्रेम पेज का प्रदर्शन अधूरा

उत्तर

संबंधित मुद्दे