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

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