javascript इन भाषाओं - मूल पृष्ठ से iframe में जावास्क्रिप्ट कोड को आमंत्रित करना




9 Answers

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

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

आप window.frames बजाय window.frames का उपयोग कर फ्रेम तक पहुंच सकते हैं।

// this option does not work in most of latest versions of chrome and Firefox
window.frames[0].frameElement.contentWindow.targetFunction(); 
प्रेरित स्क्रिप्टिंग

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

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

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




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

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

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

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

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




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

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

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

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

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 माध्यम से




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

frames['iframeid'].method();



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

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

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

उदाहरण:

अभिभावक पर:

function tunnel(fn) {
    fn();
}

आईफ्रेम पर:

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

parent.tunnel(myFunction);

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

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




नितिन बंसल के जवाब को बढ़ावा देना

और यहां तक ​​कि अधिक मजबूती के लिए:

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');

getIframeWindow(el).targetFunction();
...



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

window.location.reload();

या इसे सीधे आईफ्रेम में पृष्ठ से करें:

window.parent.location.reload();

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




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

window.parent.targetFunction ();




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

parent.document.getElementById('frameid').contentWindow.somefunction()



Related