IFrame jQuery में एक तत्व का चयन करना


122

हमारे आवेदन में, हम एक वेब पेज को पार्स करते हैं और इसे iFrame में दूसरे पेज में लोड करते हैं। उस लोड किए गए पृष्ठ के सभी तत्वों में उनका टोकन-एस है। मुझे उन टोकन-एस द्वारा तत्वों का चयन करने की आवश्यकता है। मीन्स - मैं मुख्य पृष्ठ पर एक तत्व पर क्लिक करता हूं और iFrame में पृष्ठ में संबंधित तत्व का चयन करता हूं। JQuery की मदद से मैं इसे निम्नलिखित तरीके से कर रहा हूं:

function selectElement(token) {
     $('[tokenid=' + token + ']').addClass('border'); 
}

हालांकि इस फ़ंक्शन के साथ मैं केवल वर्तमान पृष्ठ में तत्वों का चयन कर सकता हूं, iFrame में नहीं। क्या कोई मुझे बता सकता है कि मैं लोड किए गए iFrame में तत्वों का चयन कैसे कर सकता हूं?

धन्यवाद।

जवाबों:


157
var iframe = $('iframe'); // or some other selector to get the iframe
$('[tokenid=' + token + ']', iframe.contents()).addClass('border');

यह भी ध्यान दें कि यदि srcइस iframe का कोई अलग डोमेन इंगित कर रहा है, तो सुरक्षा कारणों से, आप जावास्क्रिप्ट में इस iframe की सामग्री तक नहीं पहुँच पाएंगे।


8
ध्यान रखें $ ('iframe') iframe को सीधे वापस नहीं करता है। आपको इसे सरणी से बाहर खींचने की आवश्यकता है।
मैकायला

मदद करने की इच्छा के लिए धन्यवाद। लेकिन यह काम नहीं करता है।
सायकोर

3
@ साइकोरो, यह काम करना चाहिए। क्या आप इस iframe को गतिशील रूप से उत्पन्न कर रहे हैं? यह मत भूलो कि यदि आप इस iframe के src तत्व को किसी अन्य डोमेन से अपने सुरक्षा कारणों के कारण इंगित करते हैं तो आप इसकी सामग्री तक नहीं पहुँच सकते।
डारिन दिमित्रोव

मैं इसे एक अलग डोमेन से नहीं, बल्कि एक ही फ़ोल्डर से लोड करता हूं। IFrame सामग्री को गतिशील रूप से उत्पन्न किया जा रहा है और इसे सर्वर पर फ़ाइल के रूप में संग्रहीत किया जाता है। फिर उस फ़ाइल को iFrame में लोड किया जा रहा है।
सायबर

@ साइकोरो, मैंने अपना उत्तर अपडेट कर दिया है। गुजरने की कोशिश करेंiframe.contents()
डारिन दिमित्रोव

52

इस पोस्ट पर नज़र डालें: http://praveenbattula.blogspot.com/2009/09/access-iframe-content-using-jquery.html

$("#iframeID").contents().find("[tokenid=" + token + "]").html();

अपने चयनकर्ता को खोज विधि में रखें।

यह संभव नहीं है, लेकिन अगर iframe आपके सर्वर से नहीं आ रहा है। अन्य पोस्ट अनुमति से इनकार त्रुटियों के बारे में बात करते हैं।

jQuery / जावास्क्रिप्ट: एक iframe की सामग्री तक पहुँचने


यह तत्व के HTML प्राप्त करने के संदर्भ में काम करता है, लेकिन मैं उस चयनित तत्व में CSS क्लास कैसे जोड़ सकता हूं? $ ("# iframeDiv")। सामग्री ()। ("[tokenid =" + token + "]") को जोड़ें। AddClass ("बॉर्डर"); काम करने के लिए प्रतीत नहीं होता है।
सायकोर

1
क्या आपको कोई अनुमति से वंचित त्रुटियां हैं? क्या आप मुझे iframe का html दे सकते हैं?
केविन बोवर्सॉक्स

नहीं, कोई अनुमति नहीं मुद्दों से इनकार कर दिया।
साइकेरो

20

जब आपका दस्तावेज तैयार हो जाता है तो इसका मतलब यह नहीं है कि आपका आइफ्रेम भी तैयार है,
इसलिए आपको आईफ्रेम लोड घटना को सुनना चाहिए , फिर बाद में अपना नंबर चुनें:

$(function() {
    $("#my-iframe").bind("load",function(){
        $(this).contents().find("[tokenid=" + token + "]").html();
    });
});

-3

यदि मामला कंसोल के माध्यम से IFrame तक पहुंच रहा है, जैसे क्रोम देव उपकरण तो आप केवल ड्रॉपडाउन (चित्र देखें) के माध्यम से डोम अनुरोधों के संदर्भ का चयन कर सकते हैं।

क्रोम देव उपकरण - iFrame का चयन करना


-9

यहाँ सरल JQuery के साथ केवल कंटेनर में div ड्रैग करने योग्य बनाने के लिए ऐसा किया गया है:

$("#containerdiv div").draggable( {containment: "#containerdiv ", scroll: false} );
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.