Show a website inside an ionic tab

Question

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.

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

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?

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

Answer 1

Try to load the content from the website via ajax, not the whole page via iframe. You can achieve this by doing it like it follows:

You're first going to put a div to that place, where you want to page to be displayed.

HTML:

<div id="loadExternalURL"></div>

And in JavaScript you fetch the code via Ajax or jQuery and after you got it, you're going to fill the div with that code:

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

I managed to solve it using 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);
}