calling a parent controller function in EXTjs from an Iframe

Question

Good day all, I'm struck on this easy problem, I need your advice once more:

I'm editing a EXTjs application (which I didn't do). in this application, there is at some point an iframe, that call an external html file, defined:

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

I need to call functions defined in the view controller FROM the iframe, there will be several function to be called, and for now I've setted up a simple test case, so I've created the controller for the view file that has the iframe like the following:

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

well, in the iframe I have this code, which I have found on the sencha forums, an old thread:

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

this is actually not working, well, is there a way to call that function from the iframe?

thanks in advance.

Answer 1

You can send a message from an iframe to the parent window and write code that responds to it. For example from an iframe execute:

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

And in the MerchController you can implement onmessage like this:

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

Note that instead of 'message' you can pass an object if you need to. Check API info for postMessage.