मैं एक iframe से एक मूल विंडो जावास्क्रिप्ट फ़ंक्शन को कॉल करना चाहता हूं।
<script>
function abc()
{
alert("sss");
}
</script>
<iframe id="myFrame">
<a onclick="abc();" href="#">Call Me</a>
</iframe>
मैं एक iframe से एक मूल विंडो जावास्क्रिप्ट फ़ंक्शन को कॉल करना चाहता हूं।
<script>
function abc()
{
alert("sss");
}
</script>
<iframe id="myFrame">
<a onclick="abc();" href="#">Call Me</a>
</iframe>
जवाबों:
<a onclick="parent.abc();" href="#" >Call Me </a>
विंडो देखें
वर्तमान विंडो या सबफ़्रेम के जनक का संदर्भ देता है।
यदि विंडो में माता-पिता नहीं है, तो इसकी मूल संपत्ति अपने आप में एक संदर्भ है।
जब एक विंडो को एक <iframe>
, <object>
या <frame>
, में लोड किया जाता है , तो इसका अभिभावक विंडो को एम्बेड करने वाले तत्व के साथ विंडो होता है।
alert
आह्वान किया जाएगा; माता-पिता का alert
कार्य या iframe का alert
कार्य, अगर parent.abc();
iframe कहा जाता है?
window.postMessage()
(या window.parent.postMessage()
) मौजूद है। @Andrii उत्तर की
मुझे हाल ही में यह पता लगाना था कि यह काम क्यों नहीं किया।
आप जिस बच्चे को आइफ्रेम से बुलाना चाहते हैं उसे माता-पिता के सिर में होना चाहिए। यदि यह शरीर में है, तो स्क्रिप्ट वैश्विक दायरे में उपलब्ध नहीं है।
<head>
<script>
function abc() {
alert("sss");
}
</script>
</head>
<body>
<iframe id="myFrame">
<a onclick="parent.abc();" href="#">Click Me</a>
</iframe>
</body>
आशा है कि यह किसी को भी मदद करता है जो इस मुद्दे पर फिर से ठोकर खाता है।
यह विधि सुरक्षित रूप से cross-origin
संचार को सक्षम बनाती है।
और अगर आपके पास पैरेंट पेज कोड तक पहुंच है, तो किसी भी पैरेंट विधि के साथ-साथ किसी भी डेटा को सीधे पास किया जा सकता है Iframe
। यहाँ एक छोटा सा उदाहरण है:
मूल पृष्ठ:
if (window.addEventListener) {
window.addEventListener("message", onMessage, false);
}
else if (window.attachEvent) {
window.attachEvent("onmessage", onMessage, false);
}
function onMessage(event) {
// Check sender origin to be trusted
if (event.origin !== "http://example.com") return;
var data = event.data;
if (typeof(window[data.func]) == "function") {
window[data.func].call(null, data.message);
}
}
// Function to be called from iframe
function parentFunc(message) {
alert(message);
}
आईफ्रेम कोड:
window.parent.postMessage({
'func': 'parentFunc',
'message': 'Message text from iframe.'
}, "*");
// Use target origin instead of *
अद्यतन:
सुरक्षा नोट:
हमेशा एक विशिष्ट टारगेट प्रदान करें। नहीं *
, यदि आप जानते हैं कि अन्य विंडो का दस्तावेज़ कहाँ स्थित होना चाहिए। एक विशिष्ट लक्ष्य प्रदान करने में विफल रहने से आप किसी भी इच्छुक दुर्भावनापूर्ण साइट पर डेटा भेजते हैं ( ZalemCitizen द्वारा टिप्पणी )।
संदर्भ:
मैंने इसे एक अलग उत्तर के रूप में पोस्ट किया है क्योंकि यह मेरे मौजूदा उत्तर से असंबंधित है।
इस मुद्दे ने हाल ही में एक उपडोमेन के संदर्भ में एक iframe से माता-पिता तक पहुंचने के लिए फिर से क्रॉप किया और मौजूदा फिक्सेस काम नहीं किया।
इस बार उत्तर माता-पिता पृष्ठ के document.domain को संशोधित करने और iframe समान होने के लिए था। यह एक ही मूल नीति की जांच को बेवकूफ बना देगा, यह सोचकर कि वे एक ही डोमेन पर मौजूद हैं (उप डोमेन को एक अलग मेजबान माना जाता है और एक ही मूल नीति जांच विफल हो जाती है)।
<head>
पेरेंट डोमेन से मेल करने के लिए iframe में पेज पर निम्नलिखित को सम्मिलित करें (अपने सिद्धांत के लिए समायोजित करें)।
<script>
document.domain = "mydomain.com";
</script>
कृपया ध्यान दें कि यह लोकलहोस्ट डेवलपमेंट पर एक एरर फेंक देगा, इसलिए एरर से बचने के लिए निम्नलिखित जैसे चेक का उपयोग करें:
if (!window.location.href.match(/localhost/gi)) {
document.domain = "mydomain.com";
}
example.com
iframe है abc.example.com
, तो माता-पिता और iframe दोनों को कॉल करना होगाdocument.domain = "example.com"
आप उपयोग कर सकते हैं
window.top
निम्नलिखित देखें।
<head>
<script>
function abc() {
alert("sss");
}
</script>
</head>
<body>
<iframe id="myFrame">
<a onclick="window.top.abc();" href="#">Click Me</a>
</iframe>
</body>
abc()
केवल तभी काम करेगी जब मूल पृष्ठ पर विरोध के रूप में iframe मेंfunction abc()
घोषित किया गया हो । window.top.abc()
मूल दस्तावेज़ में iframe से बाहर निकलता है।
उन लोगों के लिए एक और इसके अतिरिक्त जिन्हें इसकी आवश्यकता है। ऐश क्लार्क का समाधान काम नहीं करता है यदि वे विभिन्न प्रोटोकॉल का उपयोग कर रहे हैं, तो सुनिश्चित करें कि यदि आप एसएसएल का उपयोग कर रहे हैं, तो आपका आईफ्रेम एसएसएल का उपयोग कर रहा है या यह फ़ंक्शन को तोड़ देगा। उनका समाधान स्वयं डोमेन के लिए काम करता था, हालांकि इसके लिए धन्यवाद।
उपमहाद्वीपों के लिए ऐश क्लार्क द्वारा दिया गया समाधान बहुत अच्छा काम करता है, लेकिन कृपया ध्यान दें कि आपको document.domain = "mydomain.com" शामिल करना होगा; iframe पेज के प्रमुख और पैरेंट पेज के प्रमुख दोनों में, जैसा कि लिंक उसी मूल पॉलिसी चेक में कहा गया है
जावास्क्रिप्ट डोम एक्सेस के लिए लागू की गई समान मूल नीति के लिए एक महत्वपूर्ण विस्तार (लेकिन समान-मूल चेक के अन्य जायके के लिए नहीं) यह है कि एक सामान्य शीर्ष-स्तरीय डोमेन साझा करने वाली दो साइटें "समान होस्ट" को विफल करने के बावजूद संवाद करने का विकल्प चुन सकती हैं। अपने संबंधित दस्तावेज़.डोमेन डोम संपत्ति को अपने वर्तमान होस्ट नाम के समान योग्य, दाहिने हाथ के टुकड़े से परस्पर सेट करके चेक करें। उदाहरण के लिए, यदि http://en.example.com/ और http://fr.example.com/ दोनों ने document.domain को "example.com" पर सेट किया है, तो वे उसी बिंदु पर होंगे जो समान-मूल माना जाता है डोम हेरफेर का उद्देश्य।
document.domain
?
localhost
मशीन (आमतौर पर 127.0.0.1
) का आईपी पता होगा , जो इस बात पर निर्भर करता है कि यूआरएल एड्रेस बार में क्या है।
parent.abc () केवल सुरक्षा उद्देश्यों के कारण एक ही डोमेन पर काम करेगा। मैंने इस समाधान की कोशिश की और मेरा काम पूरी तरह से काम कर गया।
<head>
<script>
function abc() {
alert("sss");
}
// window of the iframe
var innerWindow = document.getElementById('myFrame').contentWindow;
innerWindow.abc= abc;
</script>
</head>
<body>
<iframe id="myFrame">
<a onclick="abc();" href="#">Click Me</a>
</iframe>
</body>
उम्मीद है की यह मदद करेगा। :)
फ़ायरफ़ॉक्स और क्रोम के साथ आप उपयोग कर सकते हैं:
<a href="whatever" target="_parent" onclick="myfunction()">
यदि iffame और माता-पिता दोनों में myfunction मौजूद है, तो माता-पिता को बुलाया जाएगा।
हालांकि इनमें से कुछ समाधान काम कर सकते हैं, उनमें से कोई भी सर्वोत्तम प्रथाओं का पालन नहीं करता है। कई ग्लोबल वैरिएबल असाइन करते हैं और आप अपने आप को कई पेरेंट वैरिएबल्स या फंक्शन्स के लिए कॉल कर सकते हैं, जो एक अव्यवस्थित, कमजोर नाम स्थान पर ले जाते हैं।
इससे बचने के लिए, एक मॉड्यूल पैटर्न का उपयोग करें। मूल विंडो में:
var myThing = {
var i = 0;
myFunction : function () {
// do something
}
};
var newThing = Object.create(myThing);
फिर, iframe में:
function myIframeFunction () {
parent.myThing.myFunction();
alert(parent.myThing.i);
};
यह क्रॉकफोर्ड के सेमिनल टेक्स्ट के इनहेरिटेंस चैप्टर में वर्णित पैटर्न के समान है, "जावास्क्रिप्ट: द गुड पार्ट्स।" आप जावास्क्रिप्ट के सर्वोत्तम अभ्यासों के लिए w3 के पृष्ठ पर और भी जान सकते हैं। https://www.w3.org/wiki/JavaScript_best_practices#Avoid_globals