在Ionic选项卡中显示一个网站

Question

在Ionic选项卡中显示一个网站

cordovaphonegap-pluginsionic-frameworkinappbrowser

16

我正在开发基于Ionic框架的移动应用程序（主要针对Android）。我的项目是基于标签的应用程序。在第一个选项卡中，我想加载外部网站，但我不知道该如何实现。

我尝试使用ngCordova InAppBrowser，但它会全屏显示，我的导航标签会被覆盖。

我还尝试加载iFrame，在模拟器中可以工作，但这种解决方案在Android设备上根本不起作用，只会显示空的iFrame（除了其位置限制，我认为可以使用CSS来解决）。

是否有什么我遗漏的东西？有任何建议吗？

最终应用程序应该如下图所示（其本机iOS版本）：示例输出设计

- Shahab

网站已加入白名单？ - Flatlineato

3

有没有办法在应用程序的部分中加载InAppBrowser？！ - Shahab

@KiNG Salam。我可以拥有你的电子邮件吗？谢谢 :) - Vahid Najafi

@vahidnajafi，您好。麻烦您发邮件给我，我的邮箱是shahabm dot com。谢谢。 - Shahab

@Shahab，我知道问这个问题已经太晚了，但是你找到解决方案了吗？ - Darshana

@Darshana，实际上我确实尝试过，但我非常确定那个解决方案（以及整个项目！）已不再受支持。 - Shahab

2个回答

3

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

使用ajax的.load()方法会有一些问题，例如加载元数据。要使用iFrame，您应该添加。此外，您还应该像这样更改Android MainActivity on Create（来源：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);
}

- Shahab

有没有纯粹的离子方式？ - Mouradif

@KiJéy，这个解决方案在最新版本的Ionic中已经不再适用了。我不确定（也记不清了！），但我认为这个问题已经解决了。 - Shahab

1

我的问题还没有解决，目前我正在使用iFrame解决它，但这种方法看起来很糟糕！ - Mouradif

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sithys · Accepted Answer

尝试通过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());   
  }
});