2012-07-08 16 views
29

फिट करने के लिए मैं इसे में 2 iFrames के साथ एक वेबपृष्ठ है। उनमें से दोनों निश्चित चौड़ाई और ऊंचाई के साथ हैं। मैं उनके अंदर बाहरी वेबसाइटों को लोड कर रहा हूं। IFrame के साथ फिट करने के लिए उन बाहरी वेबसाइटों की चौड़ाई का आकार कैसे बदल सकता हूं (जैसे मोबाइल ब्राउज़र व्यूपोर्ट बदलकर करता है)?बाहरी वेबसाइट की सामग्री का आकार बदलें iFrame चौड़ाई

+0

यह संभव नहीं है IMHO [इसे देखें] (http://stackoverflow.com/questions/3298210/how-to-embed-a-resized-website-throught-an-iframe)। –

+1

उत्तर के लिए धन्यवाद। –

+0

आपका स्वागत है :-) –

उत्तर

57

आप क्या कर सकते अपने iframe के लिए विशिष्ट चौड़ाई और ऊंचाई सेट कर दिया जाता है (उदाहरण के लिए इन आपके खिड़की आयाम के बराबर हो सकता है) और फिर इसे करने के लिए पैमाने परिवर्तन को लागू करने। स्केल मान आपकी विंडो चौड़ाई और आयाम के बीच अनुपात होगा जो आप अपने आईफ्रेम पर सेट करना चाहते थे।

उदा।

<iframe width="1024" height="768" src="http://www.bbc.com" style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"></iframe> 
+1

+1, वास्तव में अच्छा है लेकिन क्रॉस ब्राउज़र समाधान नहीं हो सकता है! –

+1

सच है, लेकिन यह क्रॉस-ब्राउज़र समाधान की आपकी परिभाषा पर निर्भर करता है। AFAIK इसे आईई> 8 – Luca

+1

में काम करना चाहिए यह मेरे लिए पूरी तरह से काम किया। धन्यवाद .... :) –

-1

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

2

ऊंचाई का आकार बदलने वाली वेबसाइट के लिए युक्ति। लेकिन आप 2 वेबसाइटों में बदल सकते हैं।

यहाँ एक बाहरी वेबसाइट के साथ एक iframe आकार बदलने के लिए मेरी कोड है। साथ ही आप माता-पिता (साथ iframe कोड) पेज और बाहरी वेबसाइट में में एक कोड डालने की जरूरत है, इसलिए, यह आप के साथ काम नहीं करेगा बाहरी वेबसाइट संपादित करने की अनुमति नहीं है।

  • स्थानीय (आइफ्रेम) पेज: यदि आप एक "शरीर ऑनलोड" और एक "div" कि सभी सामग्री को धारण की आवश्यकता है: सिर्फ एक कोड स्निपेट
  • दूरस्थ (बाह्य) पेज डालें।

स्थानीय:

<IFRAME STYLE="width:100%;height:1px" SRC="http://www.remote-site.com/" FRAMEBORDER="no" BORDER="0" SCROLLING="no" ID="estframe"></IFRAME> 

<SCRIPT> 
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; 
var eventer = window[eventMethod]; 
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message"; 
eventer(messageEvent,function(e) { 
    if (e.data.substring(0,3)=='frm') document.getElementById('estframe').style.height = e.data.substring(3) + 'px'; 
},false); 
</SCRIPT> 

आप इस "frm" उपसर्ग की जरूरत है की तरह ट्विटर या फेसबुक प्लगइन्स अन्य embeded कोड के साथ समस्याओं से बचने के: और शरीर "0 मार्जिन" के लिए स्टाइल की जरूरत है। यदि आपके पास एक सादा पृष्ठ है, तो आप दोनों पृष्ठों (स्क्रिप्ट और ऑनलोड) पर "if" और "frm" उपसर्ग को हटा सकते हैं।

रिमोट:

आप jQuery के बारे में 'असली' पेज ऊंचाई हासिल करने के लिए की जरूरत है। मैं जब से तुम समस्या होगा शुद्ध जावास्क्रिप्ट के साथ कैसे करना है जब (उच्च ऊंचाई कम करने के लिए) ऊंचाई नीचे का आकार परिवर्तन body.scrollHeight या संबंधित का उपयोग कर महसूस नहीं कर सकते। किसी कारण से, यह हमेशा सबसे बड़ी ऊंचाई (पूर्व-redimensioned) वापस आ जाएगा।

<BODY onload="parent.postMessage('frm'+$('#master').height(),'*')" STYLE="margin:0"> 
<SCRIPT SRC="path-to-jquery/jquery.min.js"></SCRIPT> 
<DIV ID="master"> 
your content 
</DIV> 

तो, मूल पृष्ठ (iframe) में 1px डिफ़ॉल्ट ऊंचाई है। स्क्रिप्ट आईफ्रेम से "संदेश/घटना के लिए प्रतीक्षा करें" डालता है। संदेश (पोस्ट संदेश) प्राप्त होता है और पहले 3 वर्ण "frm" कर रहे हैं (उल्लेख समस्या से बचने के), 4 की स्थिति से नंबर मिल और iframe ऊंचाई (शैली), 'पिक्सल' इकाई सहित सेट हो जाएगा।

बाहरी साइट (आईफ्रेम में लोड) "एफएमएम" के साथ माता-पिता (सलामी बल्लेबाज) और मुख्य div की ऊंचाई (इस मामले में आईडी "मास्टर") के साथ "एक संदेश" भेजेगी। पोस्टमेसेज में "*" का अर्थ है "कोई भी स्रोत"।

उम्मीद है कि इससे मदद मिलती है। मेरी अंग्रेजी के लिए खेद है।

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