इफ्रेम से अभिभावक दस्तावेज़

Question

से कस्टम इवेंट ट्रिगर कस्टम इवेंट को आईफ्रेम के अंदर एक कस्टम इवेंट को आग लगाने और इसे मूल दस्तावेज़ से ढूंढने में कुछ परेशानी हो रही है। आईफ्रेम और मूल दस्तावेज़ दोनों में एक ही स्रोत है (समान प्रोटोकॉल, एक ही होस्ट, एक ही पोर्ट)।

कोई सलाह?

Answer 1

यह काम करता है:

parent.$('body').trigger('eventName'); 

ईवेंट को ट्रिगर के अंदर आइफ्रेम मूल दस्तावेज़ में पता लगाया जाएगा।

Answer 2

मैं एक समान समस्या में भाग गया और हल करने के लिए window.postMessage का उपयोग किया।

वर्तमान में, एपीआई केवल एक स्ट्रिंग को पारित करने का समर्थन करता है, लेकिन यदि आप अपना समाधान संशोधित करते हैं तो यह शक्तिशाली हो सकता है। अधिक जानकारी here

स्रोत पृष्ठ (एक iframe द्वारा उपयोग किया जा रहा) से:
postMessage एपीआई 2 पैरामीटर उम्मीद - संदेश, लक्ष्य

पूर्व: (window.parent.postMessage("HELLO_PARENT", 'http://parent.com');

माता पिता पृष्ठ से आइफ्रेम शामिल हैं। उदाहरण के लिए कंटेनर):

1. के रूप में आप सामान्य रूप से

   होगा एक घटना श्रोता जोड़ें

   window.addEventListener('message', handleMessage, false); 
   

2. समर्थन दोनों एक ही डोमेन और क्रॉस-डोमेन iframes घटना प्रणाली का उपयोग करने के लिए है एक सुसंगत जवाब \

   function handleMessage(event) { 
       if (event.origin != "h ttp://child.com") { return; } 
       switch(event.data.message) { 
        case "HELLO_PARENT": 
         alert("Hello Child"); 
         break; 
       } 
   } 
   

Answer 3

event.origin चेक (सुरक्षा के लिए) के साथ अपने फ़ंक्शन निर्धारित करें।

लक्ष्य आईफ्रेम से माता-पिता से एक कस्टम ईवेंट भेजने का लक्ष्य है।

आइफ्रेम स्रोत फ़ाइल में:

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

और मूल फ़ाइल जो आइफ्रेम शामिल में:

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