Search code examples
extjssencha-touchsencha-touch-2

Sencha Touch 2.3.1 Iframe

i am using following code to insert iframe in sencha touch tab panel. i am loading a authenticated page in Iframe. This page has form with username and password fields . The page login successfully but i want response from iframe about login status back to Sencha Application.

    Ext.application({ 
    launch: function()
    {                   
        Ext.define('I', {
            extend: 'Ext.Component',
            xtype: 'iframecmp',
            config: {                       
                url     : null                      
            },      
            initialize: function() {
                console.log("Main");
                var me = this;
                me.callParent();
                me.iframe = this.element.createChild({
                    tag: 'iframe',
                    src: this.getUrl(),
                    style: 'width: 500px; height: 500px; align:middle;'
                });

                me.relayEvents(me.iframe, '*');
            }
        });



        Ext.create("Ext.tab.Panel", {
            extend: "I",
            tabBarPosition: 'bottom',
            fullscreen: true,
            items: [
                {
                    title: 'Sencha',
                    id: "main-frame",
                    name: "main-frame",
                    iconCls: 'action',
                    xtype: 'iframecmp',
                    url: 'http://testcop.bridgealliance.com/TSM_dev_Insphere',
                    style: 'width: 500px; height: 500px; left: 100px;',
                    scroll: 'vertical'
                },
                {
                    title: 'Sencha',
                    id: "main-frame2",
                    name: "main-frame2",
                    iconCls: 'action',
                    xtype: 'container',
                    html: '<iframe src="http://localhost/phpinfo.php"></iframe>',
                    style: 'width: 50%; height: 50%; left: 10%; top: 10%;'
                }

            ]
        });
    }
}); // application()
Solution

  • If both windows are in the same domain, you can create a method callBack() on your parent, and call it in the child with

    Parent window:

    window.callBack = function(msg) { console.log(msg); }

    Child iFrame:

    window.parent.callBack(msg)

    If child iFrame is in a different domain then the browser will forbid this and you'll need to use window.postMessage() to send an even from the child window and window.addListener("message", function(msg) {}) to listen for these events in the parent.

    Here's a good tutorial that explains how to use it ...