एक आईफ्रेम (क्रॉसब्रोसर समाधान) गतिशील रूप से आकार बदलने के लिए

Question

मैं ड्रूपल पृष्ठ पर iframe शामिल करने का प्रयास कर रहा हूं। अब तक मैंने सफलतापूर्वक फ्रेम शामिल किया है, लेकिन ऊंचाई आकार का फ़ंक्शन जो मैंने लिखा है केवल इंटरनेट एक्सप्लोरर में काम करता है। मेरा लक्ष्य फ़ायरफ़ॉक्स और क्रोम में भी आकार बदलने का काम करना है। मैंने इंटरनेट की खोज की लेकिन मुझे वह नहीं मिला जो मैं ढूंढ रहा था। लंबी कहानी छोटी है, मैं चाहता हूं कि मेरा फ्रेम स्वचालित रूप से ऊंचाई का आकार बदल जाए।

यह मैं अब तक क्या किया है (यह Drupal में शामिल HTML पृष्ठ के कोड है):

<script type="text/javascript"> 
    function resize() { 
     var iframe = document.all.icw; 
     document.getElementById("icw").style.height = iframe.document.body.scrollHeight + "px"; 
    } 
</script> 
<iframe id="icw" src="XXXXX" width="100%" scrolling="no" onload="resize()"> 

मैं समझता हूँ कि अगर किसी अन्य डोमेन पर iframe जीवन समाधान की वजह से अधिक कठिन हो सकता है कि अनुमतियाँ। क्या वो सही है?

इन त्रुटियों को मैं क्रोम और फ़ायरफ़ॉक्स में प्राप्त कर रहे हैं:

क्रोम: पढ़ा नहीं जा सकता गुण अपरिभाषित

क्रोम के 'शरीर': यूआरएल YYY साथ फ्रेम से URL XXX के साथ फ्रेम का उपयोग करने के लिए JavaScript का प्रयास । डोमेन्स, प्रोटोकॉल्स और पोर्ट्स मैच करना चाहिए।

फ़ायरफ़ॉक्स: document.all अपरिभाषित है

संपादित करें: क्या होगा यदि मैं iframe तत्व में से एक को बदलना चाहते हैं? मेरे मामले में मुझे एक टेक्स्टबॉक्स मान बदलने की जरूरत है। मैं समझता हूं कि पेज को लोड होने पर मुझे ऐसा करना चाहिए लेकिन मुझे कोई समाधान नहीं मिल रहा है। कोई फर्क नहीं पड़ता है जहाँ मैं कोड डाल मैं हमेशा एक जब मैं iFrame पाठ बॉक्स तक पहुँचने का प्रयास मिलता है एक

अपरिभाषित

की कॉल नहीं कर सकता विधि 'getElementById'।

EDIT2: एक नया प्रश्न पूछा क्योंकि वे संबंधित नहीं थे।

Answer 1

यह समाधान तब तक क्रॉस-डोमेन काम करता है जब तक आपके पास दोनों तक पहुंच हो। किनारे के मामलों का एक गुच्छा है, लेकिन कम से कम आप इसके साथ शुरू कर सकते हैं। यह सुनिश्चित करने के लिए कि टाइमर इवेंट हमेशा सही आकार है, आप टाइमर ईवेंट भी जोड़ सकते हैं ताकि आपके पास स्क्रॉलबार न हो। ध्यान रखें कि यह पोस्ट मैसेज के उपयोग के कारण एचटीएमएल 5 का समर्थन करने वाले ब्राउज़र के साथ ही काम करता है।

अंदर iFrame

function resize(){ 
    var body = document.body, 
    html = document.documentElement, 
    height = body.offsetHeight; 
    if(height === 0){ 
     height = html.offsetHeight; 
    } 
    parent.postMessage({'action':'RESIZE', 'height':height}, '*'); 
} 

जनक

function handleMessage(e) { 
    if (e.data.action == 'RESIZE') { 
     var targetHeight = e.data.height; 
     $('#iFrame').height(targetHeight); 
    } 
} 

window.addEventListener("message", handleMessage, false); 

Answer 2

window.addEventListener("message", handleMessage, false); 

इस कोड IE के लिए काम नहीं करते।

IE के लिए है कि यह करता है और आप के लिए सभी दूसरे किनारे मामलों का प्रबंधन करता है इस छोटे से पुस्तकालय बाहर का उपयोग

window.attachEvent("onmessage", handleMessage, false); 

Answer 3

चेक।

https://github.com/davidjbradshaw/iframe-resizer