在离子标签中显示网站

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（我找不到源源：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);
}