Question

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

我想在iframe中加载它，但iframe中的内容不会显示iframe容器中的外部网址。

示例如下。

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

iframe标记未正确关闭，请勿忘记设置其宽度和高度。

Answer 2

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

要使用CSS滚动：

overflow : scroll;

另请查看沙箱和iFrame的无缝属性

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

Answer 3

您可以做的最好的事情是下载PhoneGap，将您的HTML5 / Sencha应用程序粘贴到新的PhoneGap应用程序的www目录中，使用XCode进行编译，以便您拥有一个为您的Sencha应用程序提供服务的本机PhoneGap应用程序。然后，一旦你走得那么远，你可以创建一个加载外部应用程序的事件（例如，点击按钮等）。

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

你不能只做一个iframe的原因至少有三倍：

有些人抱怨说，在sencha应用程序中加载iframe会使Native中的应用程序崩溃。（我想如果iframe包含一个复杂的网页，这可能会导致内存问题，从而导致应用程序崩溃。）
没有简单的方法来支持iframe中的滚动。 Sencha实现的基于JS的触摸滚动不会进入iframe。（有可能让这种方式与某种黑客一起工作，但你仍然会遇到问题＃1。）
您可能在调整iframe内容的大小时遇到问题，以使其看起来不错。

我应该注意，为了完整起见，有些人在本网站上表示他们已经能够通过JSONP / AJAX加载网页，然后将页面的HTML注入他们的Sencha应用程序。我怀疑这可能会变得非常复杂，因为只需在PhoneGap上添加一些内容并使用ChildBrowser插件即可。

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

3 个答案: