从iframe中调用父Javascript函数

时间:2022-09-01 16:00:26

I have a iframe (in my domain), that iframe has a file iframe.js.

我有一个iframe(在我的域中),iframe有一个file iframe.js。

My parent document has a file parent.js.

我的父文档有一个file parent.js。

I need to call a function that is in parent.js, from a function that is in iframe.js.

我需要调用父函数。js,来自iframe.js中的函数。

I tried doing window.parent.myfunction() this function is in the parent.js file.

我尝试了windows .parent.myfunction()这个函数在父函数中。js文件。

But, it didn't work. Only when I put the function on the parent page (I mean in the HTML), then it worked.

但是,它没有工作。只有当我将函数放在父页面(我的意思是在HTML中)时,它才会工作。

Any idea how to get this to work?

你知道怎么让它工作吗?

3 个解决方案

#1


57  

Try just parent.myfunction(). Also be 100% sure that the parent.js is included in your parent document.

试只是parent.myfunction()。也要百分百确定父母。js包含在父文档中。

#2


24  

I know this is an old question, but in case the accepted answer doesn't work (it didn't work for me) you could do this inside parent.js

我知道这是一个古老的问题,但如果大家接受的答案对我不起作用(它对我不起作用),你可以做这个内心的父母

window.myfunction = function () {
   alert("I was called from a child iframe");
}

Now from the iframe you can call myfunction() like you initially wanted

现在从iframe中,您可以像最初希望的那样调用myfunction()

window.parent.myfunction(); 

#3


8  

Window.postMessage() method safely enables cross-origin communication.

方法安全地支持跨源通信。

If you have access to parent page then any data can be passed as well as any parent method can be called directly from Iframe.

如果您可以访问父页面,那么可以传递任何数据,也可以从Iframe直接调用任何父方法。

Parent page:

父页面:

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 parentFuncName(message) {
    alert(message);
}

Iframe code:

Iframe代码:

window.parent.postMessage({
    'func': 'parentFuncName',
    'message': 'Message text from iframe.'
}, "*");

References:

引用:

#1


57  

Try just parent.myfunction(). Also be 100% sure that the parent.js is included in your parent document.

试只是parent.myfunction()。也要百分百确定父母。js包含在父文档中。

#2


24  

I know this is an old question, but in case the accepted answer doesn't work (it didn't work for me) you could do this inside parent.js

我知道这是一个古老的问题,但如果大家接受的答案对我不起作用(它对我不起作用),你可以做这个内心的父母

window.myfunction = function () {
   alert("I was called from a child iframe");
}

Now from the iframe you can call myfunction() like you initially wanted

现在从iframe中,您可以像最初希望的那样调用myfunction()

window.parent.myfunction(); 

#3


8  

Window.postMessage() method safely enables cross-origin communication.

方法安全地支持跨源通信。

If you have access to parent page then any data can be passed as well as any parent method can be called directly from Iframe.

如果您可以访问父页面,那么可以传递任何数据,也可以从Iframe直接调用任何父方法。

Parent page:

父页面:

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 parentFuncName(message) {
    alert(message);
}

Iframe code:

Iframe代码:

window.parent.postMessage({
    'func': 'parentFuncName',
    'message': 'Message text from iframe.'
}, "*");

References:

引用: