आइफ्रेम और मूल साइट के बीच संवाद कैसे करें?

Question

Iframe में वेबसाइट एक ही डोमेन में स्थित नहीं है , लेकिन दोनों मेरे हैं, और मैं iframeऔर मूल साइट के बीच संवाद करना चाहूंगा । क्या यह संभव है?

Answer 1

विभिन्न डोमेन के साथ, विधियों को कॉल करना या सीधे iframe के सामग्री दस्तावेज़ तक पहुंचना संभव नहीं है।

आपको क्रॉस-दस्तावेज़ मैसेजिंग का उपयोग करना होगा ।

शीर्ष विंडो में उदाहरण के लिए:

 myIframe.contentWindow.postMessage('hello', '*');

और iframe में:

window.onmessage = function(e){
    if (e.data == 'hello') {
        alert('It works!');
    }
};

यदि आप iframe से पैरेंट विंडो पर संदेश पोस्ट कर रहे हैं

window.top.postMessage('hello', '*')

Comments

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

— डैनी फॉक्स

जनक में window.onmesage = function()...:। आईफ्रेम में:window.top.postMessage('hello', '*')

— user123444555621

यह बग नहीं है। फ़ाइल यूआरएल बहुत असुरक्षित हो सकता है और ब्राउज़र उन्हें कभी बढ़ती देखभाल के साथ इलाज कर रहे हैं। पुराने दिनों में वापस आप file://C:/Windows/system32/whateverएक वेबपेज पर एक लिंक डाल सकते हैं और इसे उपयोगकर्ता के सिस्टम फ़ोल्डर में सही कर सकते हैं। इन दिनों ब्राउज़र ज्यादातर उसी तरह लिंक पर क्लिक को नजरअंदाज करते हैं। एक वेबसर्वर चलाएं और उसके माध्यम से अपने कोड तक पहुंचें और आपको त्रुटियां दिखाई देंगी।

— स्टिजन डे विट

एक अच्छे अभ्यास के रूप में, अपने लक्ष्य के लिए कभी भी '*' का उपयोग न करें। वास्तव में, एमडीएन कहता है - "हमेशा एक विशिष्ट टारगेटऑर्गिन प्रदान करें, न कि *, यदि आप जानते हैं कि अन्य विंडो का दस्तावेज़ कहाँ स्थित होना चाहिए। किसी विशिष्ट लक्ष्य को प्रदान करने में विफल रहना आपके द्वारा किसी भी इच्छुक दुर्भावनापूर्ण साइट पर भेजे गए डेटा का खुलासा करता है।"

— रोदिवा

हम window.frames[index]चाइल्ड फ्रेम ( <iframe>, <object>, <frame>), के बराबर पाने के लिए भी उपयोग कर सकते हैं getElementsByTagName("iframe")[index].contentWindow। IFrames से पेरेंट विंडो ऑब्जेक्ट प्राप्त करने के लिए, यह उपयोग करना बेहतर है window.parent, जैसा window.topकि टॉप मोस्ट पेरेंट विंडो का प्रतिनिधित्व करता है

— Subroto

Answer 2

यह यहाँ होना चाहिए, क्योंकि 2012 से स्वीकृत उत्तर

2018 और आधुनिक ब्राउज़रों में आप iframe से मूल विंडो में एक कस्टम ईवेंट भेज सकते हैं।

आइफ्रेम:

var data = { foo: 'bar' }
var event = new CustomEvent('myCustomEvent', { detail: data })
window.parent.document.dispatchEvent(event)

माता-पिता:

window.document.addEventListener('myCustomEvent', handleEvent, false)
function handleEvent(e) {
  console.log(e.detail) // outputs: {foo: 'bar'}
}

पुनश्च: बेशक, आप विपरीत दिशा में घटनाओं को उसी तरह भेज सकते हैं।

document.querySelector('#iframe_id').contentDocument.dispatchEvent(event)

Comments

हैलो, क्या मुझे इसे करने के लिए एक ही डोमेन पर होना चाहिए?

— गिलियूम हरारी

stackoverflow.com/questions/25098021/…

— Q

यह ध्यान दिया जाना चाहिए कि dispatchEventसभी प्रमुख ब्राउज़रों में समर्थित है। IE9 वह पहला संस्करण था जो इसमें आया था, इसलिए अधिकांश OS अब इसके साथ काम करते हैं। caniuse.com/#search=dispatchEvent

— Dan Atkinson

मैं इस विधि के साथ माता-पिता से iframe संवाद करने में सक्षम नहीं हूं।

— अवन

हाँ, मुझे यह काम करने के लिए नहीं मिल सकता है, iframe js मूल विंडो के बाद लोड हो रहा है इसलिए इसे संदेश भेजने के दौरान संदेश प्राप्त करने के लिए नहीं है। यह केवल iframe से माता-पिता के लिए मेरे लिए काम करता है।

— रेडटेक

Answer 3

यह लाइब्रेरी HTML5 पोस्टमैसेज और लीगेसी ब्राउजर्स को resize + hash के साथ सपोर्ट करती है https://github.com/ternarylabs/poroleole के साथ है

संपादित करें: अब 2014 में, IE6 / 7 का उपयोग काफी कम है, IE8 और सभी समर्थन से ऊपर postMessageइसलिए मैं अब केवल इसका उपयोग करने का सुझाव देता हूं।

https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage

Comments

इस चेतावनी के साथ कि IE8 / 9 केवल स्ट्रिंग का समर्थन करता है caniuse.com/#search=postmessage (ज्ञात मुद्दों को देखें)

— Harry

यह आपके ईवेंट ऑब्जेक्ट को json में एन्कोड करके और दूसरी तरफ उन्हें डीकोड करके चारों ओर काम किया जा सकता है।

— कोडवर्ड

Answer 4

window.topसंपत्ति आपको क्या चाहिए देने के लिए सक्षम होना चाहिए।

उदाहरण के लिए

alert(top.location.href)

Http://cross-browser.com/talk/inter-frame_comm.html देखें

Comments

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

— एंड्रियास कोबर्ले

Answer 5

आप भी उपयोग कर सकते हैं

postMessage(message, '*');

Answer 6

event.source.window.postMessageप्रेषक को वापस भेजने के लिए उपयोग करें ।

इफ्रेम से

window.top.postMessage('I am Iframe', '*')
window.onmessage = (event) => {
    if (event.data === 'GOT_YOU_IFRAME') {
        console.log('Parent received successfully.')
    }
}

फिर माता-पिता से वापस कहते हैं।

window.onmessage = (event) => {
    event.source.window.postMessage('GOT_YOU_IFRAME', '*')
}