दिलचस्प पोस्ट
पायथन में कई रैखिक प्रतिगमन Windows कमांड-लाइन वातावरण का उपयोग करके आप किसी फ़ाइल में पाठ को कैसे ढूंढ सकते हैं और बदल सकते हैं? परिणामी पूर्णांक दृश्यों के अंतराल का पता लगाएं HTML5 वीडियो आयाम मुझे रूबी स्थानीय क्षेत्र को समझ में नहीं आता कैसे जाँचें कि क्या तत्व के पास जावास्क्रिप्ट में कोई भी बच्चा है? क्लियरिंग और डिफॉल्ट होम एप्लीकेशन सेट करना स्ट्रिंग में शब्दों को कैपिटलाइज़ करें सी में वेक्टर को दोहराने के लिए कैसे? जावास्क्रिप्ट YAML पार्सर क्या jQuery में वेरिएबल के साथ $ का उपयोग करने के लिए कोई विशेष कारण है? सी # /। नेट के लिए ठोस एफएफएमपीईपी आवरण एडीबी शैल इनपुट इवेंट्स कैनवास पर जेपीईजी फ़ाइल पर छवि XML विशेषता बनाम एक्सएमएल तत्व

सामग्री ऊंचाई के अनुसार iframe की ऊंचाई का आकार बदलें

मैं अपनी वेबसाइट में अपना ब्लॉग पेज खोल रहा हूं समस्या यह है कि मैं एक आइफ्रेम के लिए चौड़ाई दे सकता हूं लेकिन ऊंचाई गतिशील होनी चाहिए ताकि आइफ्रेम में कोई स्क्रॉलबार न हो, और यह एक एकल पृष्ठ जैसा दिखता है …

मैंने सामग्री की ऊँचाई की गणना करने के लिए विभिन्न जावास्क्रिप्ट कोड की कोशिश की है, लेकिन उनमें से सभी ने प्रवेश अस्वीकृत अनुमति त्रुटि दी है और इसका कोई फायदा नहीं है।

<iframe src="http://bagtheplanet.blogspot.com/" name="ifrm" id="ifrm" width="1024px" ></iframe> 

हम PHP का उपयोग करके ऊंचाई की गणना या अजाक्स का उपयोग कर सकते हैं?

वेब के समाधान से एकत्रित समाधान "सामग्री ऊंचाई के अनुसार iframe की ऊंचाई का आकार बदलें"

अपने दो उपक्षेत्रों को सीधे जवाब देने के लिए: नहीं, आप यह अजाक्स के साथ नहीं कर सकते, न ही आप इसे PHP के साथ गणना कर सकते हैं

मैंने जो अतीत में किया है, वह विंडो में आईफ्रेम वाले पृष्ठ से एक ट्रिगर का उपयोग करता है। ओपन (नहीं, domready , क्योंकि चित्र लोड होने में थोड़ी देर लग सकती है) पृष्ठ की बॉडी की ऊँचाई को माता-पिता को पास करने के लिए।

 <body onload='parent.resizeIframe(document.body.scrollHeight)'> 

फिर parent.resizeIframe इस तरह दिखता है:

 function resizeIframe(newHeight) { document.getElementById('blogIframe').style.height = parseInt(newHeight,10) + 10 + 'px'; } 

और देखने के लिए, आपके पास एक मजबूत रीसाइज़र है, जो पेज पर पूरी तरह से एक बार फिर से ट्रिगर हो जाता है, कोई बुरा सामग्री वाला contentdocument बनाम contentWindow नगण्य नहीं 🙂

ज़रूर, अब लोगों को आपकी आइफ्रेम मूलभूत ऊँचाई पर पहले दिखाई देगी, लेकिन इसे आसानी से अपने आइफ्रेम को पहली बार छुपाकर और एक 'लोडिंग' छवि दिखाकर आसानी से नियंत्रित किया जा सकता है। फिर, जब resizeIframe फ़ंक्शन में किक करता है, वहां दो अतिरिक्त लाइनें डालते हैं जो लोड हो रही छवि को resizeIframe , और उस अशुद्ध अजाक्स लुक के लिए iframe दिखाएगी।

बेशक, यह केवल एक ही डोमेन से काम करता है, इसलिए आप इस सामग्री को एम्बेड करने के लिए एक प्रॉक्सी PHP स्क्रिप्ट चाहते हैं, और एक बार जब आप वहां जाते हैं, तो आप अपने ब्लॉग के आरएसएस फ़ीड को सीधे PHP के साथ अपनी साइट में एम्बेड कर सकते हैं।

आप जावास्क्रिप्ट के साथ ऐसा कर सकते हैं

 document.getElementById('foo').height = document.getElementById('foo').contentWindow.document.body.scrollHeight + "px"; 

फिटिंग IFRAME सामग्री गूगल पर खोजने के लिए एक आसान बात है यहां एक समाधान है :

 <script type="text/javascript"> function autoIframe(frameId) { try { frame = document.getElementById(frameId); innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document; objToResize = (frame.style) ? frame.style : frame; objToResize.height = innerDoc.body.scrollHeight + 10; } catch(err) { window.status = err.message; } } </script> 

यह निश्चित रूप से क्रॉस-डोमेन की समस्या को हल नहीं करता है जो आप कर रहे हैं … document.domain को सेट document.domain मदद कर सकता है यदि ये साइट एक ही स्थान पर हैं मुझे नहीं लगता कि अगर आप आइफैम आईएनजी यादृच्छिक साइटों हैं तो कोई समाधान नहीं है।

माइक्रोसॉफ्ट का उपयोग करते हुए इस समस्या का मेरा समाधान है जो फ़ायरफ़ॉक्स 3.6, सफारी 4.0.4 और इंटरनेट एक्सप्लोरर 7 में काम करता है:

 var iframe_container = $('iframe_container_id'); var iframe_style = { height: 300, width: '100%' }; if (!Browser.Engine.trident) { // IE has hasLayout issues if iframe display is none, so don't use the loading class iframe_container.addClass('loading'); iframe_style.display = 'none'; } this.iframe = new IFrame({ frameBorder: 0, src: "http://www.youriframeurl.com/", styles: iframe_style, events: { 'load': function() { var innerDoc = (this.contentDocument) ? this.contentDocument : this.contentWindow.document; var h = this.measure(function(){ return innerDoc.body.scrollHeight; }); this.setStyles({ height: h.toInt(), display: 'block' }); if (!Browser.Engine.trident) { iframe_container.removeClass('loading'); } } } }).inject(iframe_container); 

Iframe कंटेनर के मध्य में एक अजाक्स लोडिंग ग्राफिक दिखाने के लिए "लोडिंग" वर्ग को स्टाइल करें फिर इंटरनेट एक्सप्लोरर के अलावा ब्राउज़र्स के लिए, इसकी सामग्री पूर्ण होने पर लोडिंग ग्राफिक को निकालने के बाद, यह पूर्ण ऊंचाई IFRAME प्रदर्शित करेगा।

नीचे मेरा onload इवेंट हैन्डलर है onload

मैं एक jQuery UI संवाद के भीतर IFRAME का उपयोग करता हूं। विभिन्न उपयोगों में कुछ समायोजन की आवश्यकता होगी ऐसा लगता है कि मेरे लिए इंटरनेट एक्सप्लोरर 8 और फ़ायरफ़ॉक्स 3.5 में (अभी के लिए) चाल है। यह कुछ अतिरिक्त tweaking की आवश्यकता हो सकती है, लेकिन सामान्य विचार स्पष्ट होना चाहिए।

  function onLoadDialog(frame) { try { var body = frame.contentDocument.body; var $body = $(body); var $frame = $(frame); var contentDiv = frame.parentNode; var $contentDiv = $(contentDiv); var savedShow = $contentDiv.dialog('option', 'show'); var position = $contentDiv.dialog('option', 'position'); // disable show effect to enable re-positioning (UI bug?) $contentDiv.dialog('option', 'show', null); // show dialog, otherwise sizing won't work $contentDiv.dialog('open'); // Maximize frame width in order to determine minimal scrollHeight $frame.css('width', $contentDiv.dialog('option', 'maxWidth') - contentDiv.offsetWidth + frame.offsetWidth); var minScrollHeight = body.scrollHeight; var maxWidth = body.offsetWidth; var minWidth = 0; // decrease frame width until scrollHeight starts to grow (wrapping) while (Math.abs(maxWidth - minWidth) > 10) { var width = minWidth + Math.ceil((maxWidth - minWidth) / 2); $body.css('width', width); if (body.scrollHeight > minScrollHeight) { minWidth = width; } else { maxWidth = width; } } $frame.css('width', maxWidth); // use maximum height to avoid vertical scrollbar (if possible) var maxHeight = $contentDiv.dialog('option', 'maxHeight') $frame.css('height', maxHeight); $body.css('width', ''); // correct for vertical scrollbar (if necessary) while (body.clientWidth < maxWidth) { $frame.css('width', maxWidth + (maxWidth - body.clientWidth)); } var minScrollWidth = body.scrollWidth; var minHeight = Math.min(minScrollHeight, maxHeight); // descrease frame height until scrollWidth decreases (wrapping) while (Math.abs(maxHeight - minHeight) > 10) { var height = minHeight + Math.ceil((maxHeight - minHeight) / 2); $body.css('height', height); if (body.scrollWidth < minScrollWidth) { minHeight = height; } else { maxHeight = height; } } $frame.css('height', maxHeight); $body.css('height', ''); // reset widths to 'auto' where possible $contentDiv.css('width', 'auto'); $contentDiv.css('height', 'auto'); $contentDiv.dialog('option', 'width', 'auto'); // re-position the dialog $contentDiv.dialog('option', 'position', position); // hide dialog $contentDiv.dialog('close'); // restore show effect $contentDiv.dialog('option', 'show', savedShow); // open using show effect $contentDiv.dialog('open'); // remove show effect for consecutive requests $contentDiv.dialog('option', 'show', null); return; } //An error is raised if the IFrame domain != its container's domain catch (e) { window.status = 'Error: ' + e.number + '; ' + e.description; alert('Error: ' + e.number + '; ' + e.description); } }; 

कैसे एक आइफ्रेम ऊंचाई को गतिशील रूप से समायोजित करने के लिए वास्तव में सरल है और मेरे द्वारा परीक्षण किया है

@ स्किज़ो डकी का जवाब बहुत ही सुरुचिपूर्ण और हल्का है, लेकिन वेबकिट की स्क्रॉलहाइट के लिए कार्यान्वयन की कमी के कारण ( यहां देखें), वेबकिट-आधारित ब्राउज़रों (सफ़ारी, क्रोम, विभिन्न और विविध मोबाइल प्लेटफॉर्म) पर काम नहीं करता है।

Geko और Trident ब्राउज़र्स के साथ वेबकिट पर काम करने के लिए इस मूल विचार के लिए, केवल एक ही जगह की आवश्यकता है

 <body onload='parent.resizeIframe(document.body.scrollHeight)'> 

साथ में

 <body onload='parent.resizeIframe(document.body.offsetHeight)'> 

जब तक सब कुछ एक ही डोमेन पर है, यह काफी अच्छी तरह से काम करता है।

मैंने इस समय के साथ कुश्ती के 3 दिनों का बेहतर हिस्सा बिताया। मैं एक ऐसे आवेदन पर काम कर रहा हूं जो एक निश्चित शीर्षलेख और एक निश्चित पाद लेख को बनाए रखने में अन्य अनुप्रयोगों को स्वयं में लोड करता है। यहाँ मैं क्या साथ आया हूँ (मैं भी सफलता के साथ EasyXDM का उपयोग किया, लेकिन बाद में इस समाधान का उपयोग करने के लिए इसे खींच लिया।)

<iframe> DOM में मौजूद होने के बाद इस कोड को चलाने के लिए सुनिश्चित करें इसे उस पृष्ठ में रखें जो आईफ्रेम (माता-पिता) में खींचती है।

 // get the iframe var theFrame = $("#myIframe"); // set its height to the height of the window minus the combined height of fixed header and footer theFrame.height(Number($(window).height()) - 80); function resizeIframe() { theFrame.height(Number($(window).height()) - 80); } // setup a resize method to fire off resizeIframe. // use timeout to filter out unnecessary firing. var TO = false; $(window).resize(function() { if (TO !== false) clearTimeout(TO); TO = setTimeout(resizeIframe, 500); //500 is time in miliseconds }); 

चाल एक बाहरी स्क्रिप्ट से सभी आवश्यक iframe घटनाओं को प्राप्त करने के लिए है उदाहरण के लिए, आपके पास एक स्क्रिप्ट है जो दस्तावेज का उपयोग करते हुए आइफ्रेम बनाता है .createElement; इस स्क्रिप्ट में आप अस्थायी रूप से आईफ्रेम की सामग्री तक पहुंच प्राप्त कर सकते हैं।

 var dFrame = document.createElement("iframe"); dFrame.src = "http://www.example.com"; // Acquire onload and resize the iframe dFrame.onload = function() { // Setting the content window's resize function tells us when we've changed the height of the internal document // It also only needs to do what onload does, so just have it call onload dFrame.contentWindow.onresize = function() { dFrame.onload() }; dFrame.style.height = dFrame.contentWindow.document.body.scrollHeight + "px"; } window.onresize = function() { dFrame.onload(); } 

यह काम करता है क्योंकि dFrame उन फ़ंक्शंस में दायरे में रहता है, जिससे आपको फ्रेम के दायरे के भीतर से बाहरी आइफ्रेम तत्व तक पहुंच मिलती है, जिससे आपको वास्तविक दस्तावेज़ की ऊंचाई को देखने में मदद मिलती है और इसे आवश्यकतानुसार विस्तृत कर सकते हैं। यह उदाहरण फ़ायरफ़ॉक्स में काम करेगा लेकिन कहीं और नहीं; मैं आपको कामकाज दे सकता हूं, लेकिन आप बाकी को समझ सकते हैं;)

इसे आज़माएं, जब आप चाहें तब भी आप बदल सकते हैं इस उदाहरण jQuery का उपयोग करें

 $('#iframe').live('mousemove', function (event) { var theFrame = $(this, parent.document.body); this.height($(document.body).height() - 350); }); 

Iframe टैग पर scrolling=no विशेषता का उपयोग करने का प्रयास करें मोज़िला में भी एक overflow-x और overflow-y सीएसएस गुण है जिसे आप देख सकते हैं

ऊंचाई के संदर्भ में, आप iframe टैग पर height=100% भी कोशिश कर सकते हैं।