在离子选项卡内显示网站

问题描述

我正在开发基于离子框架的移动应用程序(主要针对 Android).我的项目是一个基于选项卡的应用程序.在第一个选项卡中，我想加载外部网站，但我不知道该怎么做.

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.

我尝试过 ngCordova InAppBrowser，但它需要全屏显示并且我的导航选项卡落后了.

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

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

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?

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

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

推荐答案

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

I managed to solve it using iFrame.

使用ajax .load() 有加载元数据等问题.要使用 iFrame，您应该添加 .此外，您应该像这样在 Create 上更改您的 Android MainActivity(I can't find source source: 使用 Phonegap 的 Android 应用的 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);
}