jQuery

Question

के साथ आईफ़्रेम ऊंचाई नियंत्रित करें I iframe की ऊंचाई को नियंत्रित करने के लिए jQuery का उपयोग कर रहा हूं।

jQuery("iframe",top.document).contents().height(); 

यह काम करता है जब आईफ्रेम की ऊंचाई बढ़ जाती है। जब ऊंचाई कम हो जाती है तो यह काम नहीं करती है। यह केवल पुराने मूल्य देता है। ये क्यों हो रहा है?

Answer 1

यह मेरे लिए काम करता है अगर मैं इसे सेट करता हूं और इसे .contents() का उपयोग किए बिना पुनर्प्राप्त करता हूं। कृपया नीचे मेरा उदाहरण देखें।

function changeFrameHeight(newHeight){ 
    jQuery("iframe",top.document).height(newHeight); 
    alert("iframe height=" + jQuery("iframe",top.document).height()); 
} 

संपादित करें: अगर मैं सही ढंग से समझ, तुम वेतन वृद्धि को फोन करके स्क्रॉल बार से छुटकारा पाने और घटती फोन करके वापस मूल ऊंचाई पर जाने के लिए कोशिश कर रहे हैं।

विभिन्न ब्राउज़रों में कई परीक्षण करने के बाद। यहां कोड है जो एफएफ, आईई, क्रोम, सफारी और ओपेरा में काम करता है।

heightIncrement:function(){ 
var heightDiv = jQuery("iframe",top.document).contents().find('body').attr('scrollHeight'); 
jQuery("iframe",top.document).css({height:heightDiv}); 
} 

अपने heightDecrement समारोह बदलें निम्न का उपयोग कर रहे हैं::

heightDecrement:function(){ 
jQuery("iframe",top.document).css({height:originalHeight}); 
} 

Answer 2

लोडिंग के समय मैं फोन पर

//first declare a variable to store the original IFrame height. 
var originalHeight = $("iframe",top.document).height(); 

अपने heightIncrement समारोह निम्नलिखित का उपयोग करने के लिए परिवर्तित करें

यह फ़ंक्शन

heightIncrement:function(){  
      if($.browser.mozilla) 
      { 
      var heightDiv = jQuery("iframe",top.document).contents().attr("height")+"px";      
      jQuery("iframe",top.document).css({height:heightDiv}); 
      } 
      else if($.browser.opera || $.browser.safari || $.browser.msie) 
      {    
      var heightDiv = jQuery("iframe",top.document).height();     
      jQuery("iframe",top.document).css({height:heightDiv}); 
      } 
} 

यदि मैं सामग्री के बिना उपयोग करता हूं() यह शून्य लौटाता है।

Answer 3

मैं निम्नलिखित का उपयोग करें और यह पूरी तरह से काम करता है ...

$("#frameId").height($("#frameId").contents().find("html").height()); 

निश्चित रूप से

बस जब यह (कोई "autoresize") कहा जाता है ... लेकिन यह कम हो रही के रूप में बढ़ रही है काम करता है

Answer 4

यह प्राचीन है लेकिन उम्मीद है कि यह मदद करता है।

क्रोम (या शायद सभी वेबकिट, सुनिश्चित नहीं) की तरह लगता है कि स्क्रॉल हाइट बढ़ सकता है लेकिन कम नहीं हो सकता है (कम से कम एक आईफ्रेम में सामग्री के मामले में)। तो यदि सामग्री बढ़ती है, तो shrinks, scrollOffset उच्च स्तर पर रहता है। यह बहुत अच्छा नहीं है जब आप आईफ्रेम की ऊंचाई को हमेशा बदलने वाली सामग्री के लिए काफी बड़ा बनाने का प्रयास कर रहे हैं।

एक हैक वर्कअराउंड ऊंचाई को फिर से निर्धारित करने के लिए ऊंचाई को पुन: गणना करने के लिए है, ताकि आईफ्रेम की ऊंचाई इसकी सामग्री से छोटी हो सके, तो scrollHeight रीसेट हो गया है।

var frame = top.document.getElementById('iFrameParentContainer').getElementsByTagName('iframe')[0]; 
var body = frame.contentWindow.document.body; 
var height = body.scrollHeight; // possibly incorrect 
body.height = "1px"; 
height = body.scrollHeight; // correct 

यह मामूली झिलमिलाहट का कारण बन सकता है लेकिन आमतौर पर, यह मेरी मशीन (टीएम) पर काम नहीं करता है।

Answer 5

मैंने लोड होने पर आईफ्रेम की ऊंचाई और चौड़ाई का सफलतापूर्वक आकार बदल दिया है।आइफ्रेम स्रोत अपनी मूल से भिन्न डोमेन है तो आप शायद easyXDM का उपयोग करने की आवश्यकता होगी http://www.the-di-lab.com/?p=280

 

$(".colorbox").colorbox(

{iframe:true, 

innerWidth:0, 

innerHeight:0, 

scrolling:false, 

onComplete:function(){ 

$.colorbox.resize(

{ 

innerHeight:($('iframe').offset().top + $('iframe').height()), 

innerWidth:($('iframe').offset().left + $('iframe').width()) 

} 

); 

} 

} 

); 

Answer 6

,: मूल रूप से आप इस नीचे के रूप में कर सकते हैं, और मैं भी अपने ब्लॉग पर एक छोटा सा लेख पोस्ट करते हैं।

Answer 7

मैं इस का उपयोग करें:।

$ ('# आइफ्रेम') रहते हैं ('MouseMove', समारोह (घटना) {

वर theFrame = $ (यह parent.document.body) ;

यह .height ($ (document.body) .height() - 350);
});

Answer 8

मुझे यकीन नहीं है कि लोग अपनी विधियों से संतुष्ट हैं लेकिन मैंने एक बहुत ही सरल दृष्टिकोण लिखा है जो सफारी, क्रोम, आईई 9, ओपेरा और नवीनतम में मेरे लिए काफी अच्छा काम करता है। फ़ायरफ़ॉक्स।

मुझे एक Google कैलेंडर फेड आईफ्रेम का आकार बदलने में समस्या आई है, इसलिए मैंने आईफ़्रेम की शैली में इसे डिफ़ॉल्ट आकार दिया है: चौड़ाई = "600" और मूल रूप से अधिकतम की ऊंचाई सेटिंग जो मैं चाहता हूं, 980 मुझे विश्वास है, तो लिपटे क्रमशः 400px और 300px पर 100% पर ऊंचाई और चौड़ाई और न्यूनतम-ऊंचाई न्यूनतम-चौड़ाई के साथ एक कंटेनर डिव में है कि, और फिर कुछ jQuery पर ऑनलोड और onresize चलाने के लिए जोड़ा ...

 <script> 

     var resizeHandle = function(){ 
      var caseHeight = $('#calendarCase').height(); 
      var caseWidth = $('#calendarCase').width(); 
      var iframeWidth = $('#googleCalendar').width(caseWidth - 10); 
      var iframeHeight = $('#googleCalendar').height(caseWidth - 10);; 
     }; 


</script> 


<body id ="home" onLoad="resizeHandle()" onResize="resizeHandle()"> 

तो स्पष्ट करने के लिए, आकार परिवर्तन समारोह ऑनलोड चलाता है क्योंकि मैं अपने उत्तरदायी डिजाइन है, जो ऊंचाई calendarCase div की चौड़ाई लेता है और ऊंचाई और iframe (#googleCalendar) तदनुसार की चौड़ाई सेट में मोबाइल फोन और टेबलेट लक्ष्यीकरण कर रहा हूँ, शून्य से 10 pixes कुछ पैडिंग

संपादित करें मैं यह उल्लेख करना भूल गया कि मैंने अनुपात का उपयोग किया है ताकि अनुपात को बाधाओं और कहीं भी वर्ग को बनाए रखने के लिए iFrame की ऊंचाई निर्धारित किया जा सके।

यह ठीक काम किया है अब तक, अगर कोई किसी भी विचार क्यों यह स्थिर कृपया सलाह नहीं हो सकता है,

चियर्स

Answer 9

यह एक सरल jQuery कि मेरे लिए काम किया है। iexplorer, फायरफॉक्स और Crome में परीक्षण किया गया:

$('#my_frame').load(function() { 
     $(this).height($(this).contents().find("html").height()+20); 
}); 

मैं 20 पिक्सल जोड़ने के बस किसी भी स्क्रॉल पट्टी से बचने के लिए, लेकिन आप एक लोअर बाउंड कोशिश कर सकते हैं।