web-dev-qa-db-ja.com

iframe内から親JavaScript関数を呼び出す

（私のドメインに）iframeがあり、そのiframeにはファイル_iframe.js_があります。

親ドキュメントには_parent.js_というファイルがあります。

_parent.js_にある関数から、_iframe.js_にある関数を呼び出す必要があります。

window.parent.myfunction()この関数は_parent.js_ファイルにあります。

しかし、うまくいきませんでした。親ページに関数を配置した場合にのみ（HTMLの場合）、機能しました。

これを機能させる方法はありますか？

javascriptjqueryiframeparent
32
Ovi

parent.myfunction()だけを試してください。また、parent.jsが親ドキュメントに含まれていることを100％確認してください。

61
invertedSpear

これは古い質問ですが、受け入れられた答えが機能しない場合（私にとっては機能しませんでした）、parent.js内でこれを行うことができます

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

Iframeからmyfunction（）を呼び出すことができます

window.parent.myfunction();
28
Moses Machua

Window.postMessage()メソッドは安全に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 parentFuncName(message) {
    alert(message);
}

Iframeコード：

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

参照：

11
Andrii Verbytskyi