मैं स्वयं में सामग्री के साथ आईफ्रेम की ऊंचाई बदलने के लिए एक सरल समाधान खोज रहा था।गतिशील रूप से ऑटो आकार बदलने के लिए iframe सामग्री ऊंचाई सेट करें
ऐसा लगता है कि नियम यह है कि आप इसे धारण करने वाले पेज से आईफ़्रेम की ऊंचाई नहीं प्राप्त कर सकते हैं। यह स्पष्ट रूप से सुरक्षा की वजह से है। हम ऐसा कैसे कर सकते हैं?
iframe में: तो तुम आइफ्रेम पेज में कुछ कोड जोड़ने के लिए इसका मतलब है कि। आइफ्रेम (आईडी = "myiframe" के साथ मेरे मामले में) पकड़े एक छोटे जावास्क्रिप्ट जोड़ने पेज में: आप iframe में अपने कोड को यह स्क्रिप्ट जोड़ने:
<body onload="parent.alertsize(document.body.scrollHeight);">
होल्डिंग पेज
<script>
function alertsize(pixels){
pixels+=32;
document.getElementById('myiframe').style.height=pixels+"px";
}
</script>
अब क्या होता है कि जब आईफ्रेम लोड हो जाता है तो यह मूल विंडो में जावास्क्रिप्ट को ट्रिगर करता है, जो इस मामले में आईफ्रेम धारण करने वाला पृष्ठ है।
उस जावास्क्रिप्ट फ़ंक्शन में यह भेजता है कि इसकी (iframe) ऊंचाई कितनी पिक्सेल है।
पैरेंट विंडो संख्या लेती है, स्क्रॉलबार से बचने के लिए 32 जोड़ती है, और आईफ़्रेम ऊंचाई को नए नंबर पर सेट करती है।
यही है, और कुछ भी आवश्यक नहीं है।
लेकिन अगर आप को पता है कुछ और छोटे चाल पढ़ने पर रखने की तरह है ...
IFRAME में गतिशील ऊँचाई? यदि आप मुझे सामग्री टॉगल करना चाहते हैं तो iframe ऊंचाई बदल जाएगी (पृष्ठ को पुनः लोड करने और अधिभार को ट्रिगर करने के बिना)। कि स्क्रिप्ट के
<script>
function toggle(obj) {
var el = document.getElementById(obj);
if (el.style.display != 'block') el.style.display = 'block';
else el.style.display = 'none';
}
</script>
सिर्फ जोड़ें:: मैं आमतौर पर एक बहुत ही सरल टॉगल स्क्रिप्ट मैं ऑनलाइन पाया जोड़ने
<script>
function toggle(obj) {
var el = document.getElementById(obj);
if (el.style.display != 'block') el.style.display = 'block';
else el.style.display = 'none';
parent.alertsize(document.body.scrollHeight); // ADD THIS LINE!
}
</script>
कैसे आप ऊपर स्क्रिप्ट का उपयोग करना आसान है:
<a href="javascript:toggle('moreheight')">toggle height?</a><br />
<div style="display:none;" id="moreheight">
more height!<br />
more height!<br />
more height!<br />
</div>
उन लोगों के लिए जो सिर्फ कट और पेस्ट करना चाहते हैं और वहां से जाते हैं, यहां दो पृष्ठ हैं। मेरे मामले में मैं उन्हें एक ही फ़ोल्डर में था, लेकिन इसे क्रॉस डोमेन भी काम करना चाहिए (मुझे लगता है कि ...)
पूरा होल्डिंग पेज कोड:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>THE IFRAME HOLDER</title>
<script>
function alertsize(pixels){
pixels+=32;
document.getElementById('myiframe').style.height=pixels+"px";
}
</script>
</head>
<body style="background:silver;">
<iframe src='theiframe.htm' style='width:458px;background:white;' frameborder='0' id="myiframe" scrolling="auto"></iframe>
</body>
</html>
पूरा iframe कोड: (यह iframe नाम "theiframe।htm ")
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>IFRAME CONTENT</title>
<script>
function toggle(obj) {
var el = document.getElementById(obj);
if (el.style.display != 'block') el.style.display = 'block';
else el.style.display = 'none';
parent.alertsize(document.body.scrollHeight);
}
</script>
</head>
<body onload="parent.alertsize(document.body.scrollHeight);">
<a href="javascript:toggle('moreheight')">toggle height?</a><br />
<div style="display:none;" id="moreheight">
more height!<br />
more height!<br />
more height!<br />
</div>
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
THE END
</body>
</html>
ऐसा लगता है कि यह बहुत अच्छा काम करेगा, लेकिन ध्यान रखें, यह क्रॉस-डोमेन काम नहीं करेगा। पूरी तरह से क्रॉस-डोमेन विधि के लिए यह उदाहरण देखें: http://stackoverflow.com/questions/153152/resizing-an-iframe-based-on-content या क्रॉस-डोमेन करने में सहायता के लिए यह और अधिक मजबूत लाइब्रेरी देखें: http://easyxdm.net/wp/2010/03/17/resize-iframe-based-on-content/ और यह लाइब्रेरी जो iFrame को बदलने वाली सामग्री को बदलने के लिए 'mutationObserver' का उपयोग करती है और' पोस्ट मैसेज 'को संभालने के लिए क्रॉस डोमेन मुद्दा। https://github.com/davidjbradshaw/iframe-resizer – Lucas
@ डेविड ब्रैडशॉ आपकी स्क्रिप्ट कार्य सर्वर सेटिंग्स को समायोजित किए बिना क्रॉस-डोमेन करता है? – Lucas
हां यह iframe और पैरेंट पेज के बीच postMessage का उपयोग करता है। –
सरल समाधान:
<iframe onload="this.style.height=this.contentWindow.document.body.scrollHeight + 'px';" ...></iframe>
यह काम करता है जब आइफ्रेम और माता पिता के खिड़की में एक ही डोमेन में हैं दो में आती है जब यह काम नहीं करता। विभिन्न डोमेन
आप रॉक! आपको बहुत - बहुत धन्यवाद! – Erick
क्या यह वास्तव में क्रॉस डोमेन काम कर रहा है? मैंने कोशिश नहीं की लेकिन मुझे लगता है कि यह नहीं होना चाहिए। आप विभिन्न डोमा के माध्यम से जावास्क्रिप्ट तक नहीं पहुंच सकते इन। –
यदि आकार गलत है, तो आपको iFrame में अपने पृष्ठ के अंत में