javascript - 从 Iframe 调用 EXTjs 中的父 Controller 函数

Question

大家好，我被这个简单的问题打动了，我再次需要你的建议:

我正在编辑一个 EXTjs 应用程序(我没有这样做)。在这个应用程序中，在某个时候有一个 iframe，它调用一个外部 html 文件，定义为:

items: [{
        xtype: "component",
        id: "dasboardM",
        autoEl: {
            tag: "iframe",
            width: '100%',
            height: '95%',
            src: "/resources/extendpanel/dashboard.html"
        }
    }]

我需要从 iframe 调用 View Controller 中定义的函数，将调用多个函数，现在我已经设置了一个简单的测试用例，所以我为 View 文件创建了 Controller 具有如下 iframe:

Ext.define('Dor3.view.merch.MerchController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.merch',
    ...
    onIframeCall : function(){
    console.log("fromIframe!");
    }

好吧，在 iframe 中我有这段代码，这是我在 sencha 论坛上找到的一个旧线程:

$(".iframeToExt").click(function(){
    var myParent = window.parent;
    var controller = myParent.window.Dor3.app.getController('Dor3.view.merch.MerchController');
    controller.onIframeCall();
    });

这实际上不起作用，嗯，有没有办法从 iframe 调用该函数？

提前致谢。

Answer 1

您可以将消息从 iframe 发送到父窗口并编写响应它的代码。例如从 iframe 执行:

window.parent.postMessage('message', '*');

在 MerchController 中，您可以像这样实现 onmessage:

window.onmessage = function(ev){
    if (ev.data == 'message') {
        controller.onIframeCall();
    }
};

请注意，如果需要，您可以传递对象而不是 'message'。检查 postMessage 的 API 信息.