2013-01-02 11 views
9

मैं एक आईफ्रेम में वेबसाइट का केवल एक छोटा सा हिस्सा रखना चाहता हूं। यह मैं कैसे करूंगा? आम तौर पर जब मैं किसी वेबसाइट के लिए आईफ्रेम सेट करता हूं (याहू कहता है) यह पूरी वेबसाइट प्राप्त करता है ... आइए कहें कि मैं केवल वेबसाइट का एक छोटा सा हिस्सा चाहता हूं, मैं यह कैसे करूँगा?आप किसी वेबसाइट के केवल एक निश्चित अनुभाग को iframe में कैसे डालते हैं?

क्या वेबसाइट के आईफ्रेम पर मार्जिन डालना संभव है?

मैं अपनी वेबसाइट पर एक वेबसाइट का आईफ्रेम डाल रहा हूं। (यदि यह समझ में आता है)

अग्रिम धन्यवाद: डी

उत्तर

22

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

आप आईएफआरएएम को एक div में लपेट सकते हैं और पूर्ण शीर्ष और बाएं सीएसएस गुणों का उपयोग करके डीआईवी सामग्री को स्क्रॉल कर सकते हैं।

यहाँ एक उदाहरण है:

#my-div 
{ 
    width : 400px; 
    height : 200px; 
    overflow : hidden; 
    position : relative; 
} 

#my-iframe 
{ 
    position : absolute; 
    top  : -100px; 
    left  : -100px; 
    width : 1280px; 
    height : 1200px; 
} 

यहाँ आप आयाम 400x200px के साथ एक DIV की है। अब IFRAME को इसके अंदर ले जाकर आप इसे सही जगह पर रख सकते हैं।

<div id="my-div"> 
<iframe src="http://www.example.com" id="my-iframe" scrolling="no"></iframe> 
</div> 
+0

यह www.example.com के साथ कैसे काम करता है लेकिन उदा। https://www.marktplaats.nl के साथ नहीं? (यानी iframe सफेद/दिखाया नहीं गया है, कोई त्रुटि दिखाई नहीं दे रही है, iframe स्क्रॉल करने योग्य या बड़ा कुछ भी नहीं बदलता है)। –

1

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

एक विकल्प के रूप में, आप बस एक साधारण <div> का उपयोग करें और पूरे पृष्ठ लोड और सिर्फ अनुभाग बाहर बांधना आप चाहते करने के लिए jQuery load समारोह इस्तेमाल कर सकते हैं:

$('#target-div').load('http://www.yahoo.com'); 

वहाँ अन्य बातों के हो सकता है आप की जरूरत है करते हैं, और एक महत्वपूर्ण अंतर यह है कि सामग्री एक अलग विंडो में अलग होने के बजाय मुख्य पृष्ठ का हिस्सा बन जाएगी।


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

PHP के साथ आप उस फ़ाइल को पढ़ने के लिए file_get_contents() का उपयोग कर सकते हैं जिसे आप पार्स करना चाहते हैं और फिर DOMDocument का उपयोग करके इसे पार्स करने के लिए उपयोग करें और इच्छित डीवी को पकड़ें।

यहां बुनियादी विचार है। यह untested है, लेकिन सही दिशा में ले जाना चाहिए:

$page = file_get_contents('http://touch.facebook.com'); 
$doc = new DOMDocument(); 
$doc->loadHTML($page); 
$divs = $doc->getElementsByTagName('div'); 
foreach($divs as $div) { 
    // Loop through the DIVs looking for one withan id of "content" 
    // Then echo out its contents (pardon the pun) 
    if ($div->getAttribute('id') === 'content') { 
     echo $div->nodeValue; 
    } 
} 
+0

जब मैं आईफ्रेम को कम करने की कोशिश करता हूं, तो यह केवल वेबसाइट के ऊपरी बाएं कोने की ओर जाता है। आइए कहें कि मैं इस वेबसाइट पर सिर्फ इस पोस्ट का आइफ्रेम चाहता हूं। मैं बाकी सब कुछ को छोड़कर पेज के बीच में आईफ्रेम कैसे प्राप्त करूं? –

+1

ओके दो मिनट के बाद उत्तर दोबारा जांचें। मैं इसे संपादित कर रहा हूं – Azzy

+0

नमस्ते, यहां 'आईडी' और 'सामग्री' क्या है? –

1

यह मज़बूती के कारण same origin policy और संबंधित आइफ्रेम प्रतिबंध नहीं किया जा सकता।

.. वही मूल नीति जावास्क्रिप्ट जैसी कई ब्राउज़र-पक्ष प्रोग्रामिंग भाषाओं के लिए एक महत्वपूर्ण सुरक्षा अवधारणा है। नीति .. विभिन्न साइटों पर पृष्ठों के अधिकांश तरीकों और गुणों तक पहुंच को रोकती है

यदि यह अपनी वेबसाइट में अपनी वेबसाइट [या लक्ष्य साइट के लिए एक प्रॉक्सी] तत्पश्चात JavaScript माता पिता डोम या एम्बेडेड आइफ्रेम के रूप में वांछित के सीएसएस संशोधित कर में ..

लक्ष्य वेबसाइट तो था किसी अन्य माध्यम से डेटा संचार करने के लिए तैयार है (एक्सडीआर/एक्सएचआर + CORS सहित), तो उनको संभावित रूप से हैक-ए-बाउट्स के रूप में भी इस्तेमाल किया जा सकता है। हालांकि, इस कार्य के लिए कोई सामान्य समाधान नहीं है।

भी jQuery.load (जो एक्सएचआर का उपयोग करता है) एक ही मूल नीति के द्वारा सीमित है:

कारण ब्राउज़र सुरक्षा पाबन्दी के

, सबसे "अजाक्स" अनुरोध एक ही मूल नीति के अधीन हैं; अनुरोध किसी भिन्न डोमेन, सबडोमेन या प्रोटोकॉल से डेटा सफलतापूर्वक पुनर्प्राप्त नहीं कर सकता है।

+0

जब मैं आईफ्रेम को कम करने का प्रयास करता हूं, तो यह केवल वेबसाइट के ऊपरी बाएं कोने की ओर जाता है। आइए कहें कि मैं इस वेबसाइट पर सिर्फ इस पोस्ट का आइफ्रेम चाहता हूं। मैं बाकी सब कुछ को छोड़कर पेज के बीच में आईफ्रेम कैसे प्राप्त करूं? –

+0

@ ब्रायनस्मिथ मुझे समन्वयित संचार का उपयोग किए बिना कोई सामान्य समाधान नहीं पता है। हालांकि, ताहिर का जवाब देखें जो आपके लिए काम कर सकता है - यदि आपके लक्षित ग्राहक आइफ्रेम को दफन करने की अनुमति देते हैं। (मुझे यकीन नहीं है कि प्रतिबंध क्या हैं, यदि कोई हो।) –

-3

पूर्ण वेबसाइट एक और तरीका है करने के लिए एक आसान तरीका है लोड करता है

<iframe src="http://site.com/#content"></iframe> 

जहां #content सामग्री divs आईडी कि

+0

जब मैं आईफ्रेम को कम करने का प्रयास करता हूं, तो यह केवल वेबसाइट के ऊपरी बाएं कोने की ओर जाता है। आइए कहें कि मैं इस वेबसाइट पर सिर्फ इस पोस्ट का आइफ्रेम चाहता हूं। मैं बाकी सब कुछ को छोड़कर पेज के बीच में आईफ्रेम कैसे प्राप्त करूं? –

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