Показать веб-сайт внутри ионной вкладки

Я работаю над мобильным приложением, основанным на ионных каркасах (в основном предназначенным для Android). Мой проект - приложение на основе табуляции. На первой вкладке я хочу загрузить внешний веб-сайт, но я не могу понять, как это сделать.

Я попробовал ngCordova InAppBrowser, но он занимает весь экран, и мои вкладки навигации отстают.

Я также пробовал загружать iFrame, и он работает в симуляторе, но это решение вообще не работает на устройствах Android и показывает пустой iFrame (помимо его пределов позиционирования, которые, я думаю, я мог бы отсортировать с помощью css).

Есть ли что-нибудь, чего я не вижу? Любое предложение?

Окончательное приложение должно выглядеть как (его родная версия iOS): Sample Output Design

Ответы

Ответ 1

Мне удалось решить это с помощью iFrame.

Использование ajax .load() имеет проблемы, такие как загрузка метаданных. Чтобы использовать iFrame, вы должны добавить <access origin="yourwebsite.com/*"/>. Кроме того, вы должны изменить свой Android MainActivity на Create, подобный этому (Я не могу найти источник источника: iframe для приложений Android с использованием Phonegap не работает):

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

Ответ 2

Попробуйте загрузить контент с веб-сайта через 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());   
  }
});