Sencha Touch 2.3.1 iframe答案

【问题标题】：Sencha Touch 2.3.1 IframeSencha Touch 2.3.1 iframe
【发布时间】：2014-04-04 02:23:19
【问题描述】：

我正在使用以下代码在 sencha 触摸标签面板中插入 iframe。我正在 Iframe 中加载经过身份验证的页面。此页面包含用户名和密码字段的表单。页面登录成功，但我希望 iframe 将有关登录状态的响应返回到 Sencha 应用程序。

    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()

【问题讨论】：

标签： extjs sencha-touch sencha-touch-2

【解决方案1】：

如果两个窗口在同一个域中，您可以在父级上创建一个方法 callBack()，并在子级中调用它

父窗口：

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

子 iFrame：

window.parent.callBack(msg)

如果子 iFrame 位于不同的域中，则浏览器将禁止此操作，您需要使用 window.postMessage() 从子窗口发送偶数，并使用 window.addListener("message", function(msg) {}) 在父窗口中侦听这些事件。

这是一个很好的教程，解释了如何使用它......

http://davidwalsh.name/window-postmessage

【讨论】：