javascript - 在 Sencha-Touch 2 应用程序中加载外部 Web 应用程序

Question

我是 Sencha-Touch 2 的新手，正在开发一个项目，我必须访问应用程序中的网站，但该网站与应用程序位于不同的域中。

我想将其加载到 iframe 中，但 iframe 中的内容不会显示 iframe 容器中外部 url 中的任何内容。

示例如下。

new Ext.TabPanel({
            fullscreen: true,
            type: 'dark',
            sortable: true,
            items: [{
                title: 'Tab 1',
                html: '1',
                cls: 'card1'
            }, {
                title: 'Tab 2',
                html: '2',
                cls: 'card2'
            }, {
                title: 'The Latest',
        html: '<iframe src =\"http://www.google.com\"></iframe>',
        id: 'feedTab',
        iconCls: 'team',
        scroll : false
            }]
        });

Answer 1

您能做的最好的事情就是下载 PhoneGap，将您的 HTML5/Sencha 应用程序粘贴到新 PhoneGap 应用程序的 www 目录中，使用 XCode 对其进行编译，以便您拥有一个为您的 Sencha 应用程序提供服务的 native PhoneGap 应用程序。然后，一旦您完成了这一步，您就可以创建一个事件来加载外部应用程序(例如，单击按钮等)。

PhoneGap 提供了一个 JavaScript 入口点，您可以在 Sencha 开发中使用它。您可以运行 native PhoneGap 功能，包括 PhoneGap 的 ChildBrowser 插件 (https://github.com/purplecabbage/phonegap-plugins/tree/master/iPhone/ChildBrowser)。使用 Sencha 调用 PhoneGap 的 childbrowser 插件的 JS 入口点，并使用 ChildBrowser 加载您的外部应用程序。

不能只使用 iframe 的原因至少有三个:

1. 有些人提示在 sencha 应用程序中加载 iframe 导致该应用程序在 Native 中崩溃。 (我想如果 iframe 包含复杂的网页，这可能会导致内存问题，从而导致应用程序崩溃。)
2. 没有简单的方法来支持 iframe 内的滚动。 Sencha 实现的基于 JS 的触摸滚动不会带入 iframe 中。 (也许可以通过某种黑客手段让它工作，但你仍然会遇到上面的问题#1。)
3. 您可能在调整 iframe 内的内容大小以使其看起来不错时遇到问题。

我应该指出，为了完整起见，有些人在此站点上表示他们已经能够通过 JSONP/AJAX 加载网页，然后将页面的 HTML 注入(inject)到他们的 Sencha 应用程序中。我怀疑要保持一致工作可能会像简单地在 PhoneGap 上加强一点并使用 ChildBrowser 插件一样复杂。