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): Sample Output Design

@Shahab I know it's too late to ask you this, but did you find a solution? — Darshana, Mar 10 '22 at 10:28
@Darshana actually I did, but I am pretty sure that solution (and the whole project!) is no longer supported. — Shahab, Mar 17 '22 at 20:32

score 5 · Answer 1 · answered Apr 22 '15 at 14:03

5

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

answered Apr 22 '15 at 14:03

Sithys

3,655
8
32
67

Thanks @Sithys, I've thought of this method. But, I think JS files on remote page will not run this way (like Google Analytics). Am I right? And if so, can you suggest any solution for it? – Shahab Apr 22 '15 at 16:39
Google Analytics is available via plugin. The method i posted is only for a page which you want to display on a website. Do you want to use the functions from that site also? – Sithys Apr 22 '15 at 19:52
The website is http://Bazar360.com. As you can see, there is no important JS on it, even jQuery. But, when I try this method, I hit http://en.wikipedia.org/wiki/Same-origin_policy :-/ I managed to bypass it by jQuery, but it do not work on device. Its really frustrating so I am thinking on move to native... :-/ – Shahab Apr 22 '15 at 23:45
1

Sithys and @Flatlineato, Is there any way to load InAppBrowser in part of the screen?! – Shahab Apr 23 '15 at 14:19

score 3 · Accepted Answer · edited May 23 '17 at 12:02

3

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

edited May 23 '17 at 12:02

Community

1
1

answered May 03 '15 at 12:24

Shahab

794
2
12
23

Is there no pure ionic way ? – Mouradif Jul 03 '17 at 11:42
@KiJéy this solution no more works in recent version of ionic. I am not sure (do not remember!) but I think the problem is already gone. – Shahab Jul 24 '17 at 15:16
1

Problem's not gone for me, I am currently solving it with an iFrame but it seems so dirty ! – Mouradif Jul 24 '17 at 15:25

Show a website inside an ionic tab

2 Answers2

Linked