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

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