在离子选项卡中显示网站

Question

我正在研究基于离子框架的移动应用程序(主要针对Android).我的项目是基于标签的应用程序.在第一个标签中,我想加载一个外部网站,但我无法弄清楚如何做到这一点.

我尝试了ngCordova InAppBrowser,但它需要全屏,我的导航标签落后.

我也尝试加载一个iFrame,它在模拟器中工作,但这个解决方案在Android设备上根本不起作用并显示一个空的iFrame(除了它的定位限制,我认为我可以使用css对其进行排序).

有什么我想念的吗？有什么建议吗？

最终应用应该看起来像(它的原生iOS版本):

Answer 1

尝试通过ajax从网站加载内容,而不是通过iframe加载整个页面.您可以通过以下方式实现此目的:

您首先要将div放到要显示页面的位置.

HTML:

<div id="loadExternalURL"></div>

在JavaScript中,您通过Ajax或jQuery获取代码,并在获得它之后,您将使用该代码填充div:

JS:

/*jQuery*/
$('#loadExternalURL').load('http://www.google.com');

/*ajax*/
$.ajax({
  dataType:'html',
  url:'http://www.google.com',
  success:function(data) {
    $('#ajax').html($(data).children());   
  }
});

Answer 2

我设法使用 iFrame 解决了这个问题。

使用ajax.load()会遇到加载元数据等问题。要使用 iFrame，您应该添加<access origin="yourwebsite.com/*"/>. 另外，您应该像这样更改 Create 上的 Android MainActivity （我找不到源代码：使用 Phonegap 的 Android 应用程序的 iframe 不起作用）：

@Override
public void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    super.init();
    super.appView.setWebViewClient(new CordovaWebViewClient(this, super.appView) {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            return false;
        }
    });
    // Set by <content src="index.html" /> in config.xml
    loadUrl(launchUrl);
}