मूल पृष्ठ से एक iframe में जावास्क्रिप्ट कोड को शामिल करना


615

मूल रूप से, मेरे पास iframeएक पृष्ठ में एम्बेडेड है और iframeकुछ जावास्क्रिप्ट दिनचर्या है जो मुझे मूल पृष्ठ से आह्वान करने की आवश्यकता है।

अब विपरीत बिल्कुल सरल है क्योंकि आपको केवल कॉल करने की आवश्यकता है parent.functionName(), लेकिन दुर्भाग्य से, मुझे इसके बिल्कुल विपरीत की आवश्यकता है।

कृपया ध्यान दें कि मेरी समस्या स्रोत URL को नहीं बदल रही है iframe, लेकिन इसमें परिभाषित फ़ंक्शन को लागू कर रही है iframe


42
पेरेंट के बारे में आपके नोट ।fuctioName () ने iframe के पैरेंट html में फ़ंक्शन को कॉल करने की मेरी समस्या को हल किया। Thanx!
साइबरफोन

1
नोट करें कि डिबगिंग करते समय आप iframe के url को देखने के लिए window.location.href या parent.location.href जैसी चीजें कर सकते हैं, यदि आप सत्यापित करना चाहते हैं कि आपके पास iframe का संदर्भ है जिसे आप ढूंढ रहे हैं।
एरोनल्स

@Le dorfier's जवाब देखें ... मेरे लिए पूरी तरह से काम किया।
एरिकबेस्ट

जवाबों:


542

मान लें कि आपके iFrame की आईडी "targetFrame" है और जिस फ़ंक्शन को आप कॉल करना चाहते हैं वह है targetFunction():

document.getElementById('targetFrame').contentWindow.targetFunction();

आप window.framesइसके बजाए फ़्रेम का उपयोग भी कर सकते हैं document.getElementById

// this option does not work in most of latest versions of chrome and Firefox
window.frames[0].frameElement.contentWindow.targetFunction(); 

3
FF 7, Chrome 12, IE 8/9, और Safari (इस संस्करण के बारे में निश्चित नहीं) में काम करता है
डार्सी

3
यह समाधान मेरे गैजेट के लिए काम नहीं करता है, यहां मेरा कोड है document.getElementById('remote_iframe_0').contentWindow.my.create_element_gadg‌​et('verify_user');"रिमोट_इफ़्रेम_0 एक अपाचे शिंडिग सर्वर द्वारा प्रोग्राममैटिकली बनाया गया है, लेकिन window.parent.document.getElementById('remote_iframe_0').contentWindow.my.create_element_gadg‌​et('verify_user');"काम करता है
जे बॉर्न

3
@ डीन हेनरी "आप एक jQuery फ़ंक्शन द्वारा क्या मतलब है?" jQuery एक जावास्क्रिप्ट लाइब्रेरी है।
जोएल अनएर

8
@JellicleCat ऐसा इसलिए है क्योंकि मूल पृष्ठ और iframe में अलग-अलग होस्ट हैं, जिससे यह क्रॉस-ऑरिजनल फ्रेम बन जाता है, जैसा कि संदेश आपको बताता है। जब तक प्रोटोकॉल, डोमेन और पैरेंट पेज का पोर्ट और iframe मैच, तब तक सब कुछ ठीक चलेगा।
मार्क अमेरी

1
मैंने एक उदाहरण जोड़ा है कि कैसे उल्लिखित window.frames विधि का उपयोग किया जाए।
एलिजा लिन

145

यहाँ जागरूक होने के लिए कुछ विचित्रताएँ हैं।

  1. HTMLIFrameElement.contentWindowशायद आसान तरीका है, लेकिन यह काफी मानक संपत्ति नहीं है और कुछ ब्राउज़र इसका समर्थन नहीं करते हैं, ज्यादातर पुराने हैं। ऐसा इसलिए है क्योंकि DOM लेवल 1 HTML मानक के बारे में कुछ नहीं कहना हैwindow ऑब्जेक्ट के ।

  2. आप भी कोशिश कर सकते हैं HTMLIFrameElement.contentDocument.defaultView, जो कुछ पुराने ब्राउज़रों को अनुमति देता है लेकिन IE नहीं करता है। फिर भी, मानक स्पष्ट रूप से यह नहीं कहता है कि आपको windowवस्तु वापस मिलती है , उसी कारण से (1), लेकिन आप देखभाल करने पर यहां कुछ अतिरिक्त ब्राउज़र संस्करण चुन सकते हैं।

  3. window.frames['name']खिड़की लौटना सबसे पुराना और इसलिए सबसे विश्वसनीय इंटरफ़ेस है। लेकिन फिर आपको name="..."नाम से एक फ्रेम प्राप्त करने में सक्षम होने के लिए एक विशेषता का उपयोग करना होगा, जो कि थोड़ा बदसूरत / पदावनत / संक्रमणकालीन है। ( id="..."बेहतर होगा लेकिन IE ऐसा नहीं करता है।)

  4. window.frames[number]भी बहुत विश्वसनीय है, लेकिन सही सूचकांक जानने की चाल है। आप इस तरह से दूर हो सकते हैं। यदि आप जानते हैं कि आपके पास पृष्ठ पर केवल एक iframe है।

  5. यह पूरी तरह से संभव है कि बच्चा iframe अभी तक लोड नहीं हुआ है, या कुछ और गलत हो गया है ताकि इसे दुर्गम बनाया जा सके। आपको संचार के प्रवाह को उल्टा करना आसान हो सकता है: अर्थात, window.parentजब यह लोड हो चुका है तो बच्चे को iframe इसकी स्क्रिप्ट को सूचित करता है और वापस बुलाया जाने के लिए तैयार है। मूल स्क्रिप्ट में अपनी स्वयं की वस्तुओं में से एक (उदाहरण के लिए एक कॉलबैक फ़ंक्शन) को पास करके, उस माता-पिता को उसके साथ जुड़े हुए HTMLRrameElement के बारे में चिंता किए बिना iframe में स्क्रिप्ट के साथ सीधे संवाद कर सकते हैं।


13
उत्तम सामग्री! विशेष रूप से आपका सुझाव 5. अत्यंत मूल्यवान साबित हुआ है। क्रोम में माता-पिता से iFrame फ़ंक्शंस तक पहुँचने का प्रयास करते समय इसने मुझे बहुत सारे सिरदर्द हल कर दिए। फंक्शन ऑब्जेक्ट को iFrame से पास करते हुए इसे 9 से 7 तक क्रोम, FF और यहां तक ​​कि IE में एक आकर्षण की तरह चलाया गया और यह भी जांचना बहुत आसान हो गया कि फ़ंक्शन पहले से लोड था या नहीं। धन्यवाद!
Jpsy

नंबर 3 काम करता है, लेकिन बेहतर है अगर आप इसे पसंद करते हैं @le dorfier ने अपनी टिप्पणी में इसे रखा। methode()भाग को नोटिस करें ।
एरिकबेस्ट

कृपया यह भी ध्यान दें कि आधुनिक ब्राउज़रों में सुरक्षा प्रतिबंधों (FF29 और Chrome34 का परीक्षण किया गया) के कारण यह बहुत मायने रखता है जहां आप अपने फ़ंक्शन को कॉल करते हैं। बस एक स्क्रिप्ट टैग या $ (दस्तावेज़) से फ़ंक्शन को कॉल करना। पहले से ही () काम नहीं करेगा। इसके बजाय कॉल को बॉडी के ऑन लोड टैग के अंदर, या किसी एंकर <a href="javascript:doit();"> इसे करें </a> के रूप में सुझाए गए elswhere (देखें stackoverflow.com/questions/921387/… )। फ़ंक्शन कॉल को स्क्रिप्ट में पास करना कॉलबैक के रूप में भी आमतौर पर काम करता है।
टाइटस

@chovy: नहीं, इस बारे में विवेक के जवाब में स्पष्टीकरण देखें।
बोबंस

66

माता-पिता JS फ़ंक्शन को कॉल iframeकरना संभव है, लेकिन केवल तभी जब माता-पिता और पेज लोड किए गए iframeदोनों एक ही डोमेन यानी abc.com से हों, और दोनों एक ही प्रोटोकॉल का उपयोग कर रहे हों अर्थात दोनों या तो हों http://याhttps://

नीचे वर्णित मामलों में कॉल विफल हो जाएगा:

  1. मूल पृष्ठ और iframe पृष्ठ विभिन्न डोमेन से हैं।
  2. वे विभिन्न प्रोटोकॉल का उपयोग कर रहे हैं, एक http: // पर है और दूसरा https: // पर है।

इस प्रतिबंध का कोई भी समाधान बेहद असुरक्षित होगा।

उदाहरण के लिए, कल्पना कीजिए कि मैंने डोमेन superwinningcontest.com पंजीकृत किया और लोगों के ईमेल के लिंक भेजे। जब वे मुख्य पृष्ठ को लोड करते हैं, तो मैं iframeवहां कुछ एस छिपा सकता हूं और उनके फेसबुक फीड को पढ़ सकता हूं , हाल ही में अमेज़ॅन या पेपल लेनदेन की जांच कर सकता हूं , या - यदि उन्होंने ऐसी सेवा का उपयोग किया है जो पर्याप्त सुरक्षा को लागू नहीं करता है - उनके पैसे बाहर स्थानांतरित करें हिसाब किताब। इसलिए जावास्क्रिप्ट समान-डोमेन और समान-प्रोटोकॉल तक सीमित है।


6
सुंदर और खतरनाक en.wikipedia.org/wiki/Cross-document_messaging
Laramie

क्या किसी को पता है कि एक अलग उप-डोमेन इसके कारण विफल हो जाएगा? मुझे समस्या है कि मुझे विश्वास है कि इस से संबंधित है डिबगिंग में कठिनाई हो रही है - iframe एक मूल विंडो फ़ंक्शन को कॉल कर रहा है, लेकिन कॉल नहीं हो रहा है।
जेक

1
ध्यान दें, यह विभिन्न पोर्ट संख्याओं के लिए भी विफल होगा। यानी abc.com:80! = abc.com:8080
prasanthv

31

IFRAME में, अपने फ़ंक्शन को विंडो ऑब्जेक्ट के लिए सार्वजनिक करें:

window.myFunction = function(args) {
   doStuff();
}

मूल पृष्ठ से पहुंच के लिए, इसका उपयोग करें:

var iframe = document.getElementById("iframeId");
iframe.contentWindow.myFunction(args);

बहुत बढ़िया जवाब। यहां अधिवेशन का पक्का नहीं। मेरा एक अनुवर्ती प्रश्न है। अगर मुझे एक नया प्रश्न शुरू करना चाहिए, तो मैं करूंगा। मुझे एक समस्या है। मेरे पृष्ठ का iframe गतिशील रूप से आबाद है। इसमें एक बटन होता है जिसका onclick()ईवेंट केवल कॉल करता है window.print()। यह प्रिंट सामग्री की iframeपूरी तरह से। लेकिन जब iframe का पेज सार्वजनिक फ़ंक्शन को कॉल करता है window.print()और यदि मूल पृष्ठ सार्वजनिक फ़ंक्शन को कॉल करता है, तो माता-पिता की सामग्री मुद्रित होती है। मुझे यह कैसे कोड करना चाहिए ताकि window.print()सार्वजनिक फ़ंक्शन में कॉल onclickघटना के रूप में व्यवहार करता है ?
कार्ल

1
@ कार्ल आप कॉल नहीं करना चाहते हैं onclick। आप बुलाना चाहते हैं iframe.contentWindow.print()
टॉमालक

दुर्भाग्य से, यह काम नहीं करता है। शायद मुझे एक नया प्रश्न शुरू करना चाहिए और अपने कोड का दस्तावेज़ देना चाहिए? किसी भी तरह से, मूल पृष्ठ सामग्री प्रिंट भी करती है। document.getElementById('myFrame').contentWindow.print();' and the pubic function PrintContent () `(ऑनकिक ईवेंट हैंडलर नहीं) जिसे कॉल window.print()इस तरह कहा जाता था:document.getElementById('myFrame').contentWindow.printContent();
कार्ल

1
@ कार्ल - हां, फिर एक नया सवाल शुरू करना सबसे अच्छा है। जब तक कि मूल विंडो iframe से भिन्न डोमेन पर न हो। फिर आपके द्वारा कोशिश की गई कोई भी चीज कभी काम नहीं करेगी
तोलक

जो मैंने यहाँ बताया वह एक IE समस्या (IE8 में परीक्षण) प्रतीत होता है। क्रोम के वर्तमान संस्करण में कोई समस्या नहीं है। हालांकि अन्य ब्राउज़रों का परीक्षण करना अभी बाकी है। रुचि रखने वालों के लिए, इस jsFiddle को देखें (मुझे लगता है कि यह गतिशील iframe लोड करने और माता-पिता से एक सार्वजनिक कॉल करने का एक अच्छा उदाहरण है।)
कार्ल

20

यदि iFrame का लक्ष्य और युक्त दस्तावेज़ अलग डोमेन पर हैं, तो पहले से पोस्ट की गई विधियाँ काम नहीं कर सकती हैं, लेकिन एक समाधान है:

उदाहरण के लिए, यदि दस्तावेज़ A में एक iframe तत्व है जिसमें डॉक्यूमेंट B शामिल है, और डॉक्यूमेंट A में डॉक्यूमेंट B की विंडो ऑब्जेक्ट पर postMessage () कॉल करता है, तो उस ऑब्जेक्ट पर एक संदेश ईवेंट को निकाल दिया जाएगा, जिसे विंडो की विंडो से उत्पन्न किया जाता है। दस्तावेज़ ए। दस्तावेज़ में स्क्रिप्ट A जैसी दिख सकती है:

var o = document.getElementsByTagName('iframe')[0];
o.contentWindow.postMessage('Hello world', 'http://b.example.org/');

आने वाली घटनाओं के लिए एक घटना हैंडलर को पंजीकृत करने के लिए, स्क्रिप्ट addEventListener () (या समान तंत्र) का उपयोग करेगी। उदाहरण के लिए, दस्तावेज़ B में स्क्रिप्ट इस तरह दिख सकती है:

window.addEventListener('message', receiver, false);
function receiver(e) {
  if (e.origin == 'http://example.com') {
    if (e.data == 'Hello world') {
      e.source.postMessage('Hello', e.origin);
    } else {
      alert(e.data);
    }
  }
}

यह स्क्रिप्ट पहले डोमेन की जांच करती है कि वह अपेक्षित डोमेन है, और फिर उस संदेश को देखता है, जिसे वह या तो उपयोगकर्ता को प्रदर्शित करता है, या दस्तावेज़ पर एक संदेश भेजकर प्रतिक्रिया करता है जिसने संदेश को पहली बार भेजा था।

http://dev.w3.org/html5/postmsg/#web-messaging के माध्यम से


1
easyXDM पुराने ब्राउज़रों (जिद्दी डायनासोरों के लिए एक फ्लैश (लोकलकनेक्शन) की वापसी सहित) के लिए पोस्टमेसेज पर एक अमूर्तता प्रदान करता है।
जॉनीरिव्स

1
यह बहुत अच्छा है ... उत्तर के ऊपर प्रयास करने के बाद आखिरकार मुझे आपका जवाब मिल गया, धन्यवाद!
vkGunasekaran

9

सिर्फ रिकॉर्ड के लिए, मैं आज एक ही मुद्दे में भाग गया हूं लेकिन इस बार पृष्ठ एक ऑब्जेक्ट में एम्बेडेड था, न कि एक iframe (क्योंकि यह एक XHTML 1.1 दस्तावेज़ था)। यहां बताया गया है कि यह वस्तुओं के साथ कैसे काम करता है:

document
  .getElementById('targetFrame')
  .contentDocument
  .defaultView
  .targetFunction();

(बदसूरत लाइन टूटने के लिए खेद है, एक लाइन में फिट नहीं हुआ)


8

IFRAME frames[]संग्रह में होना चाहिए । जैसे कुछ का उपयोग करें

frames['iframeid'].method();

यह उत्तर निश्चित रूप से कुछ और जानकारी का उपयोग कर सकता है, क्योंकि निश्चित रूप से कुछ अन्य विचार हैं। एक के लिए, मुझे लगता है कि देव methodको iframe की windowवस्तु की संपत्ति बनाने की जरूरत है ।
परिपक्व

8

Quirksmode ने इस पर एक पोस्ट किया था

चूंकि पेज अब टूट गया है, और केवल आर्काइव.ओआरजी के माध्यम से पहुंच योग्य है, मैंने इसे यहां पुन: प्रस्तुत किया:

IFrames

इस पृष्ठ पर मैं उस पृष्ठ से iframes तक पहुँचने का एक संक्षिप्त अवलोकन देता हूँ। आश्चर्य नहीं कि कुछ ब्राउज़र विचार हैं।

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

फ्रेम या वस्तु?

मूल प्रश्न यह है कि क्या आइफ्रेम को एक फ्रेम के रूप में या एक वस्तु के रूप में देखा जाता है।

  • जैसा कि फ़्रेम पेजों के परिचय पर समझाया गया है , यदि आप फ़्रेम का उपयोग करते हैं तो ब्राउज़र आपके लिए एक फ्रेम पदानुक्रम बनाता है (top.frames[1].frames[2] और ऐसे) । क्या आइफ्रेम इस फ्रेम पदानुक्रम में फिट बैठता है?
  • या क्या ब्राउज़र को एक अन्य वस्तु के रूप में एक iframe दिखाई देता है, एक वस्तु जो src संपत्ति के लिए होती है? उस स्थिति में हमें एक मानक DOM कॉलdocument.getElementById('theiframe')) का उपयोग करना होगा (जैसे इसे एक्सेस करने के लिए। सामान्य ब्राउज़रों में 'वास्तविक' (हार्ड-कोडित) iframes पर दोनों विचारों की अनुमति है, लेकिन उत्पन्न iframes को फ्रेम के रूप में एक्सेस नहीं किया जा सकता है।

NAME विशेषता

सबसे महत्वपूर्ण नियम किसी भी iframe को देना है जिसे आप एक nameविशेषता बनाते हैं , भले ही आप भी एक का उपयोग करें id

<iframe src="iframe_page1.html"
    id="testiframe"
    name="testiframe"></iframe>

अधिकांश ब्राउज़रों nameको फ़्रेम पदानुक्रम के iframe भाग को बनाने के लिए विशेषता की आवश्यकता होती है । कुछ ब्राउज़रों (विशेष रूप से मोज़िला) idको आइफ्रेम को एक वस्तु के रूप में सुलभ बनाने की आवश्यकता है । दोनों विशेषताओं को आइफ्रेम पर असाइन करके आप अपने विकल्पों को खुला रखते हैं। लेकिन nameकहीं अधिक महत्वपूर्ण है id

पहुंच

या तो आप iframe को एक ऑब्जेक्ट के रूप में एक्सेस करते हैं और उसका परिवर्तन करते हैं srcया आप iframe को एक फ्रेम के रूप में एक्सेस करते हैं और इसे बदलते हैं location.href

document.getElementById ('iframe_id')। src = 'newpage.html'; फ़्रेम ['iframe_name']। location.href = 'newpage.html'; फ़्रेम सिंटैक्स थोड़ा बेहतर है क्योंकि ओपेरा 6 इसका समर्थन करता है लेकिन ऑब्जेक्ट सिंटैक्स नहीं।

आईफ्रेम तक पहुंचना

तो एक पूर्ण क्रॉस-ब्राउज़र अनुभव के लिए आपको iframe को एक नाम देना चाहिए और उपयोग करना चाहिए

frames['testiframe'].location.href

वाक्य - विन्यास। जहाँ तक मुझे पता है यह हमेशा काम करता है।

दस्तावेज़ तक पहुँचना

दस्तावेज़ को iframe के अंदर एक्सेस करना काफी सरल है, बशर्ते आप nameविशेषता का उपयोग करें । दस्तावेज़ में iframe में लिंक की संख्या की गणना करने के लिए, करें frames['testiframe'].document.links.length

जनरेट किए गए आईफ्रेम

जब आप W3C DOM के माध्यम से एक iframe जनरेट करते हैं , iframe को तुरंत framesसरणी में दर्ज नहीं किया जाता है , हालाँकि, और frames['testiframe'].location.hrefसिंटैक्स तुरंत काम नहीं करेगा। यदि सरणी में कोई स्क्रिप्ट नहीं चल सकती है, तो उस समय इर्रैम को बदलने से पहले ब्राउज़र को थोड़ा समय चाहिए।

document.getElementById('testiframe').srcवाक्य रचना सभी परिस्थितियों में ठीक काम करता है।

targetएक लिंक की विशेषता ओपेरा में छोड़कर, उत्पन्न आइफ्रेम के साथ काम नहीं करती है, भले ही मैंने अपना उत्पन्न आइफ्रेम ए nameऔर ए दोनों दिया हो id

targetसमर्थन की कमी का मतलब है कि आपको उत्पन्न आइफ्रेम की सामग्री को बदलने के लिए जावास्क्रिप्ट का उपयोग करना चाहिए, लेकिन चूंकि आपको इसे पहली बार में उत्पन्न करने के लिए जावास्क्रिप्ट की आवश्यकता है, इसलिए मुझे यह एक समस्या के रूप में नहीं दिखता है।

Iframes में पाठ का आकार

एक जिज्ञासु एक्सप्लोरर 6 केवल बग:

जब आप दृश्य मेनू के माध्यम से पाठ का आकार बदलते हैं, तो iframes में पाठ आकार सही रूप से बदल दिए जाते हैं। हालाँकि, यह ब्राउज़र मूल पाठ में लाइन ब्रेक को नहीं बदलता है, जिससे टेक्स्ट का हिस्सा अदृश्य हो सकता है, या लाइन ब्रेक हो सकता है जबकि लाइन अभी भी किसी अन्य शब्द को पकड़ सकती है।


5
वह लिंक टूटा हुआ प्रतीत होता है।
जापहोड़

1
और मामले को बदतर बनाने के लिए, मैं संबंधित पृष्ठ को quirksmode पर कहीं नहीं ढूंढ सकता।
स्ट्रिकजक्स


7

मुझे काफी सुरुचिपूर्ण समाधान मिला।

जैसा कि आपने कहा, मूल दस्तावेज़ पर स्थित कोड निष्पादित करना काफी आसान है। और यह मेरे कोड का आधार है, इसके विपरीत करें।

जब मेरा iframe लोड होता है, तो मैं पैरेंट दस्तावेज़ पर स्थित एक फ़ंक्शन को कॉल करता हूं, जो तर्क के रूप में iframe के दस्तावेज़ में स्थित एक स्थानीय फ़ंक्शन का संदर्भ देता है। मूल दस्तावेज़ में अब इस संदर्भ में iframe के फ़ंक्शन की सीधी पहुंच है।

उदाहरण:

जनक पर:

function tunnel(fn) {
    fn();
}

आईफ्रेम पर:

var myFunction = function() {
    alert("This work!");
}

parent.tunnel(myFunction);

जब iframe लोड होता है, तो वह parent.tunnel (YourFunctionReference) को कॉल करेगा, जो पैरामीटर में प्राप्त फ़ंक्शन को निष्पादित करेगा।

यह सरल है, विभिन्न ब्राउज़रों से सभी गैर-मानक तरीकों से निपटने के लिए बिना।


नमस्ते, क्या आप यह पुष्टि कर सकते हैं कि "विभिन्न ब्राउज़रों से सभी गैर-मानक तरीकों से निपटने के बिना यह सरल है?"
मिल्के पैटर

1
मैं विभिन्न परियोजनाओं पर इस पद्धति का उपयोग करता हूं, बहुत अच्छी तरह से काम करता है। मैंने प्रचलन में सभी ब्राउज़रों का व्यक्तिगत रूप से परीक्षण नहीं किया है, लेकिन मुझे कभी भी इस पर बग रिपोर्ट नहीं मिली।
जुलिएन एल

एक आकर्षण, IE 11, क्रोम ~ 50 की तरह काम करता है।
Augustas

1
लगता है कि क्रॉस-डोमेन नहीं है .. क्या यह है?
तुषार शुक्ला

@TusharShukla दुर्भाग्य से नहीं, यह नहीं है।
jeff-h

6

इनमें से कुछ उत्तर कॉर्स मुद्दे को संबोधित नहीं करते हैं, या यह स्पष्ट नहीं करते हैं कि आप संचार को संभव बनाने के लिए कोड स्निपेट कहां रखते हैं।

यहाँ एक ठोस उदाहरण है। कहो कि मैं मूल पृष्ठ पर एक बटन क्लिक करना चाहता हूं, और है कि iframe के अंदर कुछ करना है। यहाँ है कि मैं यह कैसे करना है।

parent_frame.html

<button id='parent_page_button' onclick='call_button_inside_frame()'></button>

function call_button_inside_frame() {
   document.getElementById('my_iframe').contentWindow.postMessage('foo','*');
}

iframe_page.html

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

function receiveMessage(event)
    {
      if(event) {
        click_button_inside_frame();
    }
}

function click_button_inside_frame() {
   document.getElementById('frame_button').click();
}

दूसरी दिशा में जाने के लिए (iframe के बाहर कॉल विधि के लिए iframe के अंदर बटन पर क्लिक करें) बस स्विच करें जहां कोड स्निपेट रहते हैं, और इसे बदलें:

document.getElementById('my_iframe').contentWindow.postMessage('foo','*');

इसके लिए:

window.parent.postMessage('foo','*')

4

JoelAnair के उत्तर के साथ जारी :

अधिक मजबूती के लिए, निम्नानुसार उपयोग करें:

var el = document.getElementById('targetFrame');

if(el.contentWindow)
{
   el.contentWindow.targetFunction();
}
else if(el.contentDocument)
{
   el.contentDocument.targetFunction();
}

आकर्षण की तरह काम :)


3

नितिन बंसल का जवाब फॉलो करते हुए

और भी अधिक मजबूती के लिए:

function getIframeWindow(iframe_object) {
  var doc;

  if (iframe_object.contentWindow) {
    return iframe_object.contentWindow;
  }

  if (iframe_object.window) {
    return iframe_object.window;
  } 

  if (!doc && iframe_object.contentDocument) {
    doc = iframe_object.contentDocument;
  } 

  if (!doc && iframe_object.document) {
    doc = iframe_object.document;
  }

  if (doc && doc.defaultView) {
   return doc.defaultView;
  }

  if (doc && doc.parentWindow) {
    return doc.parentWindow;
  }

  return undefined;
}

तथा

...
var el = document.getElementById('targetFrame');

var frame_win = getIframeWindow(el);

if (frame_win) {
  frame_win.targetFunction();
  ...
}
...


2

समान चीजें लेकिन थोड़ा आसान तरीका होगा कि आइफ्रेम के भीतर पेज से पेरेंट पेज को कैसे रिफ्रेश किया जाए । पृष्ठ पुनः लोड करने के लिए जावास्क्रिप्ट फ़ंक्शन को लागू करने के लिए मूल पृष्ठ के फ़ंक्शन को कॉल करें:

window.location.reload();

या सीधे आइफ्रेम पेज से करें:

window.parent.location.reload();

दोनों काम करते हैं।



1

यदि आप किसी अन्य फ़ंक्शन पूर्व शैडोबॉक्स या लाइटबॉक्स द्वारा उत्पन्न iframe से पेरेंट पर जावास्क्रिप्ट फ़ंक्शन को लागू करना चाहते हैं।

आपको windowऑब्जेक्ट का उपयोग करने और मूल फ़ंक्शन को लागू करने का प्रयास करना चाहिए :

window.parent.targetFunction();

मेरा मानना ​​है कि ओपी दूसरी दिशा में जाने की कोशिश कर रहा है
कमांडज

-3

मूल पृष्ठ में किसी फ़्रेम के कॉल फ़ंक्शन के लिए निम्नलिखित का उपयोग करें

parent.document.getElementById('frameid').contentWindow.somefunction()
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.