2

I looked around for quite a while but couldn't find anything that worked.

I am refering to this issue: here - embeding a website inside your ionic application. Unfortunately the suggested solution using iframe works not for all pages since many websites have blocked iframe as you can see in the picture below.

I already tried the InAppBrowser Plugin which works well. But it opens a full screen and hides my app navigation. You have to close the screen to get back to the application. Thats not really what I want. My InAppBrowserOptions are:

options : InAppBrowserOptions = {
    location : 'yes',
    hidden : 'no', 
    clearcache : 'yes',
    clearsessioncache : 'yes',
    zoom : 'yes',
    hardwareback : 'yes',
    mediaPlaybackRequiresUserAction : 'no',
    shouldPauseOnSuspend : 'no', 
    closebuttoncaption : 'Close', 
    disallowoverscroll : 'no', 
    toolbar : 'yes', 
    enableViewportScale : 'no', 
    allowInlineMediaPlayback : 'no',
    presentationstyle : 'pagesheet',
    fullscreen : 'yes',
    hideurlbar : 'yes',
    hidenavigationbuttons : 'yes',
};

Is there a better way to embed the website inside the application?

enter image description here

AUBSieGUL
  • 474
  • 1
  • 5
  • 17
  • 1
    Maybe this can help https://github.com/nioperas06/ultimate-cordova-webview-app – Junior Gantin Feb 01 '19 at 15:39
  • Hey,thank you for the Link! Problem is I already implemented an application with several functions. Now I want to display webcontent in one or two pages additionally. So a whole application just containing the web view isn't what I'm looking for. – AUBSieGUL Feb 07 '19 at 11:42
  • Did you get any solution yet? I have been looking for the same thing from very long. – Darshana Aug 06 '22 at 09:15

2 Answers2

0

Although I think InAppBrowser is best. You can customize its settings to display the navbar. I insist you to use InAppBrowser.

Now coming to the iframe alternative you can use embed and object. But that also won't work in some cases.

To customize InAppBrowser visit this link. You can also finds tons of tutorials regarding that.

I hope this helps! Thanks!

rchau
  • 535
  • 9
  • 32
  • Can you elaborate how to change the settings to display the navbar? I added my InAppBrowserOptions. For further clarification - i would like to be able to access my application menu while the website is open. – AUBSieGUL Feb 01 '19 at 11:10
0

I'm a few years late but as I see that there is still no solution, maybe I can help someone.

You need to use the target _self in create.

    const options: InAppBrowserOptions = {
        location: 'no',
        toolbartranslucent: 'no',
        toolbarcolor: '#00fff'
      };
      
    
    const browser = this.inAppBrowser.create(url, '_self', options);

if you look at the documentation

target: The target in which to load the URL, an optional parameter that defaults to _self. (String) _self: Opens in the Cordova WebView if the URL is in the white list, otherwise it opens in the InAppBrowser.

you need to add the urls in white list.

In config.xml add this inside the platforms, to accept all urls

<allow-navigation href="*" />
Omar
  • 51
  • 9