JavaScript में iframe से पैरेंट विंडो फंक्शन कैसे कॉल करें?

window.top या window.parent का उपयोग

एक iframe के अंदर से पैरेंट विंडो के फंक्शन को कॉल करने के लिए window.top (सबसे टॉप विंडो) या window.parent (तत्काल पैरेंट) का उपयोग करें।

उदाहरण

<!DOCTYPE html> 
<html> 
  <body> 
    <script> 
      // पैरेंट विंडो में फंक्शन
      function display() {
        alert("Hello World from Parent!");
      }
    </script> 
    
    <iframe id="myFrame" srcdoc="
      <a onclick='window.top.display();' href='#'>
        Click to call parent function
      </a>
    "></iframe> 
  </body> 
</html>

window.top vs window.parent

क्रॉस-ओरिजन प्रतिबंध

महत्वपूर्ण: यह केवल तभी काम करता है जब iframe और पैरेंट सेम ओरिजन (सेम डोमेन, प्रोटोकॉल, पोर्ट) के हों। क्रॉस-ओरिजन स्थितियों के लिए postMessage() API का उपयोग करें:

पैरेंट विंडो (रिसीवर)

window.addEventListener('message', function(event) {
  // सुरक्षा: ओरिजन वेरिफाई करें
  if (event.origin !== 'https://trusted-child.com') return;
  
  if (event.data.type === 'CALL_FUNCTION') {
    display();  // पैरेंट फंक्शन कॉल करें
  }
});

चाइल्ड iframe (सेंडर)

// पैरेंट को संदेश भेजें
window.parent.postMessage({
  type: 'CALL_FUNCTION',
  payload: { /* डेटा */ }
}, 'https://parent-domain.com');

सुरक्षा नोट

हमेशा event.origin को वेरिफाई करें ताकि क्रॉस-साइट स्क्रिप्टिंग (XSS) हमलों से बचा जा सके।