जावास्क्रिप्ट से अभिभावक आइफ्रेम का उपयोग कैसे करें

170

खैर, मेरे पास एक IFrame है, जो एक ही डोमेन पेज को कॉल करता है। मेरी समस्या यह है कि मैं इस पैरेंट iframe से कुछ जानकारी इस पृष्ठ (जावास्क्रिप्ट से) से एक्सेस करना चाहता हूं। मैं इस आईफ्रेम का उपयोग कैसे कर सकता हूं?

विवरण: इस तरह से कई iframes हैं, जिनमें एक ही पेज लोड हो सकता है, क्योंकि मैं विंडोज वातावरण की प्रोग्रामिंग कर रहा हूं। मैं इस इफराम को बंद करने का इरादा रखता हूं, इसीलिए मुझे यह जानने की जरूरत है कि मुझे उसके अंदर से किस चीज को बंद करना चाहिए। मेरे पास इन इफराम के संदर्भ में एक सरणी है।

संपादित करें: वहाँ iframes गतिशील रूप से उत्पन्न होते हैं

javascript iframe

— जोस लील
स्रोत

यहां तक कि अगर iframes गतिशील रूप से उत्पन्न होते हैं, तो आप किसी प्रकार के काउंटर का उपयोग करके एक नई अनूठी आईडी असाइन कर सकते हैं, अंत में आपको आईडी जानने की आवश्यकता नहीं है, लेकिन आप आसानी से खोज सकते हैं, मेरा जवाब देख सकते हैं।

— आकाश काव

138

इसके अलावा, आप समान मानों के लिए नाम और आईडी सेट कर सकते हैं

<iframe id="frame1" name="frame1" src="any.html"></iframe>

तो आप चाइल्ड पेज के अंदर अगले कोड का उपयोग कर पाएंगे

parent.document.getElementById(window.name);

— जलीय
स्रोत

16

शायद यह सभी के लिए स्पष्ट नहीं है, लेकिन इस पद्धति से आप माता-पिता के पुस्तकालय ऑब्जेक्ट का उपयोग कर सकते हैं (केवल अगर माता-पिता ने पहले ही पुस्तकालय लोड किया है)। उदाहरण: अभिभावक के साथ jQuery का उपयोग। $ ('# कुछ')

— Zsolti

1

यह समाधान IE5 + संगतता quirks मोड के साथ संगत है।

— स्लेनर

2016 में भी, यह IE की समस्या के समाधान के एक भाग के रूप में बहुत अच्छा काम करता है iframe। लेकिन यह काम क्यों करता है? window.nameएक स्ट्रिंग देता है। window.nameआईडी नाम को स्ट्रिंग के रूप में पारित करने की तुलना में उपयोग करने के बारे में क्या अलग है जो काम नहीं करता है।)

— कार्ल

3

नमस्ते, यह Chrome 59 के साथ नहीं चलता है ..: VM111: 1 अनकैप्ड DOMException: क्रॉस- ओरिजिनल फ़्रेम तक पहुँचने से मूल " xxx " के साथ एक फ़्रेम को ब्लॉक किया गया ।

— दीदिरे ६68

यदि कोर सेट नहीं है, तो क्रोम उसी फ़ोल्डर में फ़ाइलों को क्रॉस-ऑरिजिन के रूप में देखते हैं। वे कहते हैं कि यह सुरक्षा के लिए है। कोर सेट करना एक सर्वर की आवश्यकता है। क्रोम का पता चलने पर उपयोगकर्ताओं को सर्वर सेट करने या ब्राउज़र बदलने का संदेश दें।

90

बस window.frameElementअपने फ़्रेम किए गए पृष्ठ से कॉल करें । अगर पेज एक फ्रेम में नहीं है तो frameElementहोगा null।

दूसरा तरीका (एक फ्रेम के अंदर विंडो तत्व प्राप्त करना कम तुच्छ है) लेकिन पूर्णता के लिए:

/**
 * @param f, iframe or frame element
 * @return Window object inside the given frame
 * @effect will append f to document.body if f not yet part of the DOM
 * @see Window.frameElement
 * @usage myFrame.document = getFramedWindow(myFrame).document;
 */
function getFramedWindow(f)
{
    if(f.parentNode == null)
        f = document.body.appendChild(f);
    var w = (f.contentWindow || f.contentDocument);
    if(w && w.nodeType && w.nodeType==9)
        w = (w.defaultView || w.parentWindow);
    return w;
}

— इयान कार्टर
स्रोत

2

धन्यवाद! IE 6+, FF और Chrome पर काम करता है!

— 12 मई को

11

window.frameElementरिटर्न nullजब विंडो और iframe में अलग-अलग डोमेन होते हैं, यानी क्रॉस-ऑरिजनल मैसेजिंग।

— क्वर्टी

@Qwerty क्या आपने कोई समाधान पाया है?

— अजय पाटीदार

@AjayPatidar मुझे लगता है कि मैंने हार मान ली। :(

— क्वर्टी

78

मैं पोस्टमैसेज एपीआई का उपयोग करने की सलाह दूंगा ।

अपने आइफ्रेम में, कॉल करें:

window.parent.postMessage({message: 'Hello world'}, 'http://localhost/');

पृष्ठ में आप iframe शामिल कर रहे हैं, आप इस तरह की घटनाओं के लिए सुन सकते हैं:

window.addEventListener('message', function(event) {
      if(event.origin === 'http://localhost/')
      {
        alert('Received message: ' + event.data.message);
      }
      else
      {
        alert('Origin not allowed!');
      }

    }, false);

वैसे, अन्य खिड़कियों पर कॉल करना संभव है, और न केवल iframes।

पर जॉन Resigs ब्लॉग postMessage API के बारे में और अधिक पढ़ें यहाँ

— केनेथ लिने
स्रोत

7

मुझे लगता है कि यह स्पष्ट रूप से सबसे अच्छा जवाब है, <iframe>सामग्री को माता-पिता के बारे में कुछ भी जानना नहीं है और इसके विपरीत। उन्हें केवल सरल संदेश अनुबंध का पालन करना होगा। बहुत बढ़िया!

— मफीनीस

1

<Iframe> को अभी भी माता-पिता का डोमेन जानना है, है ना?

— होमर राशिदासी

1

@HomrZodyssey पैरेंट डोमेन केवल एक सुरक्षा तंत्र के रूप में उपलब्ध है, यदि ज्ञात नहीं है, तो आप सेट कर सकते हैं '*'।

— अमीर अली अकबरी

'*'ग्राहकों पर प्रयोग करें । प्रत्येक अन्य समाधान क्लाइंट ब्राउज़र में फ़ाइलों का इलाज करने वाले क्रोम ब्राउज़र पर त्रुटि देते हैं क्योंकि यह एक ही मूल नहीं है क्योंकि सर्वर स्थापित नहीं है। यह सबसे अच्छा और एकमात्र समाधान है: dyn-web.com/tutorials/iframes/postmessage

30

पुराना सवाल है, लेकिन मेरे पास बस यही मुद्दा था और आईफ्रेम प्राप्त करने का एक तरीका मिला। यह केवल मूल विंडो के फ़्रेमों [] सरणी के माध्यम से पुनरावृत्ति करने और प्रत्येक फ़्रेम की सामग्री का परीक्षण करने की बात है, उस विंडो के विरुद्ध जिसमें आपका कोड चल रहा है। उदाहरण:

var arrFrames = parent.document.getElementsByTagName("IFRAME");
for (var i = 0; i < arrFrames.length; i++) {
  if (arrFrames[i].contentWindow === window) alert("yay!");
}

या, jQuery का उपयोग कर:

parent.$("iframe").each(function(iel, el) {
  if(el.contentWindow === window) alert("got it");
});

यह विधि प्रत्येक iframe को एक आईडी असाइन करने से बचाता है, जो आपके मामले में अच्छा है क्योंकि वे गतिशील रूप से बनाए गए हैं। मैं अधिक सीधा रास्ता नहीं ढूँढ सका, क्योंकि आप window.parent का उपयोग करके iframe तत्व प्राप्त नहीं कर सकते हैं - यह सीधे पैरेंट विंडो तत्व (iframe को छोड़ते हुए) पर जाता है। तो जब तक आप आईडी का उपयोग नहीं करना चाहते हैं, तब तक उनके माध्यम से लूपिंग एकमात्र तरीका लगता है।

— ingredient_15939
स्रोत

1

अद्यतन: यह बिल्कुल विज्ञापन के रूप में काम नहीं किया, और मुझे contentWindow.document === दस्तावेज़ का उपयोग करना पड़ा। पता नहीं क्यों। इसके अलावा कुछ ब्राउज़रों में मैंने contentDocument का उपयोग किया है। खैर, मुझे वह पसंद है!

— क्रिस्टोफ

1

माफी, वास्तव में मैं केवल फ़ायरफ़ॉक्स में यह परीक्षण किया। :) हालांकि मुझे कई ब्राउज़रों में jQuery विधि और सामग्री का उपयोग करके सफलता मिली है।

— ingredient_15939

1

अपडेट: मुझे पता चला कि आप window.frameElement का भी उपयोग कर सकते हैं, लेकिन मुझे यकीन नहीं है कि कौन से ब्राउज़र इसका समर्थन करते हैं।

— क्रिस्टोफ

2

मुझे नहीं लगता कि इस प्रकार का सामान अब काम करता है; आपको एक क्रॉस-ओरिजिनल त्रुटि मिलती है।

— एंड्रयू माओ

@AndrewMao का सवाल समान मूल दस्तावेजों के बारे में है, इसलिए क्रॉस-ऑरिजिनल मुद्दों को प्राप्त करने का कोई कारण नहीं है।

— क्रिस्टोफ़

21

आप parentमूल पृष्ठ तक पहुंचने के लिए उपयोग कर सकते हैं । तो एक समारोह का उपयोग करने के लिए यह होगा:

var obj = parent.getElementById('foo');

— kemiller2002
स्रोत

1

केविन, समस्या आईडी पता है। मेरे पास कई इफ्रेम्स हैं, और मैं उन्हें कोड के अंदर से एक्सेस करना चाहता हूं

— जोस लील

फिर भी " क्रॉस-ओरिजिनल फ्रेम को एक्सेस करने से " अन्य-स्थानीयहोस्ट: 8000 " मूल के साथ एक फ्रेम को ब्लॉक करें ।"

— user2568374

13

एक बार iframe की id सेट हो जाने पर, आप iframe को आंतरिक दस्तावेज़ से एक्सेस कर सकते हैं जैसा कि नीचे दिखाया गया है।

var iframe = parent.document.getElementById(frameElement.id);

IE, क्रोम और FF में अच्छी तरह से काम करता है।

— आकाश कावा
स्रोत

ऐसा करने का एक जटिल तरीका लगता हैvar iframe = frameElement

— उड़ियाल

फ्रेम-क्लीयर वर्तमान विंडो संदर्भ में ऑब्जेक्ट लौटाता है, लेकिन parent.document.getElementById (फ्रेमएमेंट.आईडी) पैरेंट विंडो संदर्भ में ऑब्जेक्ट लौटाता है, आप फ़्रेम-क्लेमेंट के साथ पैरेंट विंडो की जावास्क्रिप्ट फ़ंक्शंस नहीं चला सकते, इसे jsfiddle में आज़माएं और मुझे दें और यदि आप कर सकें तो उदाहरण दें ।

— आकाश काव

6

शायद सिर्फ उपयोग करें

window.parent

कॉलिंग फ्रेम / विंडो पाने के लिए अपने iframe में। यदि आपके पास कई कॉलिंग फ़्रेम हैं, तो आप उपयोग कर सकते हैं

window.top

— Clawfire
स्रोत

3

इसे आज़माएं, अपने मूल फ़्रेम में इस तरह से IFRAME सेट करें:

<iframe id="frame1" src="inner.html#frame1"></iframe>
<iframe id="frame2" src="inner.html#frame2"></iframe>
<iframe id="frame3" src="inner.html#frame3"></iframe>

ध्यान दें कि प्रत्येक फ्रेम की आईडी src में एक एंकर के रूप में पारित की जाती है।

फिर अपने भीतर के html में आप उस फ्रेम की आईडी का उपयोग कर सकते हैं, जिसे लोकेशन के माध्यम से लोड किया गया है।

<button onclick="alert('I am frame: ' + location.hash.substr(1))">Who Am I?</button>

तो आप iframe के अंदर से iframe टैग का उपयोग करने के लिए parent.document.getElementById () का उपयोग कर सकते हैं

— मार्क पोर्टर
स्रोत

हां, यह सबसे तार्किक समाधान होगा, लेकिन कभी-कभी मुझे iframe के src को बदलने की आवश्यकता होती है .. और इस हैश या GET पैरामीटर को पारित करना प्रत्येक अनुरोध अच्छा नहीं है ..

— José Leal

हर बार हैश पास करना बुरा क्यों है? यह केवल ब्राउज़र को दिखाई देता है, सर्वर को नहीं, और यह कैशिंग को प्रभावित नहीं करता है जैसे गेट पैरामीटर होगा।

— मार्क पोर्टर

-1

// just in case some one is searching for a solution
function get_parent_frame_dom_element(win)
{
    win = (win || window);
    var parentJQuery = window.parent.jQuery;
    var ifrms = parentJQuery("iframe.upload_iframe");
    for (var i = 0; i < ifrms.length; i++)
    {
        if (ifrms[i].contentDocument === win.document)
            return ifrms[i];
    }
    return null;
}

— एलेक्स
स्रोत