从Iframe中调用EXTjs中的父控制器函数

calling a parent controller function in EXTjs from an Iframe

本文关键字：控制器 函数 EXTjs Iframe 调用      更新时间：2023-09-26

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

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

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

我需要从iframe中调用视图控制器中定义的函数，将有几个函数要调用，现在我已经设置了一个简单的测试用例，所以我已经为视图文件创建了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调用该函数?

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

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

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

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

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

你可以简单地使用(appname).app。getController(控制器的全名)这将返回控制器对象&你可以调用那个控制器的方法

相关文章：