在离子选项卡内显示网站

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/*"/>。此外，您应该像这样更改创建时的 Android MainActivity（~~我找不到源代码~~ 源代码：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);
}

在离子选项卡内显示网站

Show a website inside an ionic tab

cordova

phonegap-plugins

ionic-framework

inappbrowser