1

我是 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
            }]
        });
4

3 回答 3

0

您可以做的最好的事情是下载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。（有可能让它与某种黑客一起工作，但你仍然会遇到上面的问题＃1。）
  3. 您可能在调整 iframe 内内容的大小以使其看起来不错时遇到问题。

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

于 2013-01-03T15:00:57.997 回答
0

iframe 标签没有正确关闭，不要忘记设置它的宽度和高度。

于 2012-12-28T18:01:07.470 回答
0

根据您的要求为 iFrame 提供宽度和高度。

要滚动使用 CSS：

overflow : scroll;

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

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

于 2012-12-29T12:05:16.763 回答