Question

我正在开发一个将外部网址（google.com）加载到tabpanel的简单应用程序。使用ajax请求：由于访问控制允许来源，Ext.Ajax.request无效。我知道如何加载本地html，如何允许本地服务器上的访问控制。我的问题是当我无法访问外部服务器时。无论如何加载外部网址？我试过Ext.util.JSONP.request但它没有用。

这是关于tappanel和加载url的一个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中的外部域加载网址被视为安全漏洞

在sencha touch中加载外部URL 2

1 个答案:

用法：