在离子选项卡中显示网站 [英] Show a website inside an ionic tab

问题描述

我正在开发一个基于离子框架的移动应用程序（主要针对Android）。我的项目是一个基于Tab的应用程序。在第一个标签中，我想加载一个外部网站，但我不能弄清楚如何做。

我试过ngCordova InAppBrowser，但它需要全屏

我也试过加载一个iFrame，它在模拟器中工作，但这个解决方案不能在Android设备上工作，并显示一个空的iFrame （除了它的定位限制，我想我可以使用css排序）。

有什么我缺少吗？任何建议？

最后的应用程序应该看起来像（它的本地iOS版本）：

解决方案

我设法使用iFrame解决。 >

使用ajax .load（）有加载元数据的问题。要使用iFrame，您应该添加< access origin =yourwebsite.com / */> 。此外，您应该更改您的Android主动性创建时，这样（我找不到源源：使用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; 
} 
}）; 
 //由< content src =index.html/>设置在config.xml 
 loadUrl（launchUrl）; 
} 
  

I am working on an ionic framework based mobile application (mainly targeted for Android). My project is a tab based application. In the first tab I want to load an external website, but I can't figure it out how to do it.

I tried ngCordova InAppBrowser, but it takes full screen and my navigation tabs fall behind.

I also tried loading an iFrame and it works in simulator, but this solution do not work at all on android devices and show an empty iFrame (beside its positioning limits that I think I could sort it out using css).

Is there anything I am missing? Any suggestion?

The final app should looks like (Its native iOS version):

解决方案

I managed to solve it using iFrame.

Using ajax .load() have problems like loading metadata. To use iFrame, you should add <access origin="yourwebsite.com/*"/>. Also, you should change your Android MainActivity on Create like this (I can't find source source: iframe for Android apps using Phonegap not working):

@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);
}

这篇关于在离子选项卡中显示网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！