在 sencha touch 2 中加载外部 url

Posted 2023-02-25

【中文标题】在 sencha touch 2 中加载外部 url

【英文标题】：loading external url in sencha touch 2

【发布时间】：2012-05-12 20:46:38

【问题描述】：

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

这里有一个关于 Tappanel 和加载 url 的 senchafiddle 示例（不是我写的）： link

【问题讨论】：

您是如何使用Ext.util.JSONP 并表示“没用”的？请注意，您尝试从中获取数据的 URL 必须启用 JSONP

@ThiemNguyen 你是对的 jsonp 永远不会在没有启用 jsonp 的 url 上工作。我的问题是如果我不能使用 ajax 调用如何加载这个 url。

【参考方案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 被视为安全漏洞

【讨论】：

我在移动设备上运行此代码时遇到了一些问题，我无法单独拖动框架面板，我的所有标签面板都在移动。我的标签面板不适合设备的屏幕（框架以全屏模式打开，这使得标签面板变大）。请看这里：senchafiddle.com/#xxGGp谢谢

您的代码仅加载 sencha.com 其他网站，如 google.com facebook youtube 未加载

许多网站禁止通过带有 X-Frame-Options 标头的 iframe 加载。不幸的是，没有解决方法。