ajax - 在 sencha touch 2 中加载外部 url

Question

我正在开发一个将外部 url (google.com) 加载到选项卡面板中的简单应用程序。使用 ajax 请求：Ext.Ajax.request由于访问控制允许来源而无法正常工作。我知道如何加载本地 html，如何允许对本地服务器进行访问控制。我的问题是当我无法访问外部服务器时。无论如何要加载外部网址吗？我试过Ext.util.JSONP.request了，但没有用。

这是关于tappanel和加载网址的senchafiddle示例（不是我写的）： link

Answer 1

您可以做的是将其加载到 iframe 中。我已经编译了一个您可以用于此目的的组件

Ext.define('Ext.ux.IframeComponent', {
    extend: 'Ext.Component',

    xtype: 'iframecmp',

    config: {
        /**
         * @cfg {String} url URL to load
         */
        url     : null,

        /**
         * @cfg
         * @inheritdoc
         *
         * Add your own style
         */
        baseCls : Ext.baseCSSPrefix + 'iframe'
    },

    initialize: function() {
        var me = this;
        me.callParent();

        me.iframe = this.element.createChild({
            tag   : 'iframe',
            src   : this.getUrl(),
            style : 'width: 100%; height: 100%;'
        });

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

});

---

用法：

---

Ext.define("IframeCmp.view.Main", {
    extend: 'Ext.tab.Panel',
    config: {
        tabBarPosition: 'bottom',

        items: [
            {
                title   : 'Google',
                iconCls : 'action',
                xtype   : 'iframecmp',
                url     : 'http://sencha.com'
            }
        ]
    }
});

重要提示：在 iframe 中从外部域加载 URL 被视为安全漏洞