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




स्क्रिप्टिंग भाषा (12)

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

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

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

https://code.i-harness.com


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

frames['iframeid'].method();

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

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

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

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

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

window.parent.targetFunction ();


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

यहां एक ठोस उदाहरण है। मान लें कि मैं मूल पृष्ठ पर एक बटन क्लिक करना चाहता हूं, और यह 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','*')

जवाब के साथ जारी है:

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

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

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

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


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

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

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();
...

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

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

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

उदाहरण:

अभिभावक पर:

function tunnel(fn) {
    fn();
}

आईफ्रेम पर:

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

parent.tunnel(myFunction);

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

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


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

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

यहाँ से अवगत होने के लिए कुछ quirks हैं।

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

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

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

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

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


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

window.location.reload();

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

window.parent.location.reload();

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


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

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

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

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

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


       $("#myframe").load(function() {
            alert("loaded");
        });






iframe