在 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 应用程序提供服务的本机PhoneGap 应用程序。然后，一旦你做到了这一点，你就可以创建一个事件来加载你的外部应用程序（例如，点击按钮等）。

PhoneGap 提供了一个 JavaScript 入口点，您可以在 Sencha 开发中使用它。您可以运行本机 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。 （也许可以通过某种 hack 来解决这个问题，但您仍然会遇到上面的问题 #1。）
3. 您可能在调整 iframe 内内容的大小以使其看起来不错时遇到问题。

我应该注意，为了完整起见，有些人在此站点上表示他们已经能够通过 JSONP / AJAX 加载网页，然后将页面的 HTML 注入他们的 Sencha 应用程序。我怀疑这可能会像简单地在 PhoneGap 上有所了解并使用 ChildBrowser 插件一样复杂。

Answer 2

iframe标签没有正确关闭，别忘了设置它的宽高。

Answer 3

根据您的要求为 iFrame 指定宽度和高度。

要滚动使用 CSS：

overflow : scroll;

还可以查看 iFrame 的沙盒和无缝属性

http://www.w3schools.com/tags/tag_iframe.asp