1

Good day,

I'm quite new to Ionic, just to get that out of the way. I am trying to turn my website into an app, i did some research and found that the in-app-browser is the best way to do it.

    constructor(public navCtrl: NavController, private inAppBrowser: InAppBrowser){}ngOnInit() {

const options:InAppBrowserOptions =
 { 
   zoom :'no',
  location : 'no',
  toolbar : 'no'

  }
  
    const browser = this.inAppBrowser.create("skyvertstudios.com/yaadi", '_system',options);

} }

Now when i run this code the website isn't shown. When I also change the '_system to '_self it loads the webpage but i lose everything that i created within the app.

I know am missing something in the above lines but i am not sure what am missing that will allow the page to be displayed within the app while also keep my tabs and overall app look.

App Image Example

Edit: Added the image above to better explain what is it am trying to do. In the blank white space the webpage should be loaded but it's not being loaded

Community
  • 1
  • 1
Leone
  • 11
  • 2

1 Answers1

1

Have you installed the inappbrowser plugin into your app first?

Edit: InAppBrowser will open either externally, on the user's browser (_system) or internally as a new webview (_self), in this last case the webview will cover the entire app's window so yes, your current app stays behind and now you should use events to close the webview eventually and return to your app (read my comment below).

Your question does not mention what exactly are you trying to achieve here, please clarify that.

andreszs
  • 2,896
  • 3
  • 26
  • 34
  • Yes it has been installed. That's the first thing i have done. The Inappbrowser work, it's just that when the function is called it doesn't show within the app it shows the website – Leone Jul 08 '18 at 01:06
  • I see. Opening with `_self` does not remove your current index page, it creates a new one. You can use the [loadstop](https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/#inappbrowseraddeventlistener) event listener to detect when this new webview has been navigated, and close it when you detect certain URL, for example, if you navigate to an URL with the `?close` param, then from Cordova check if the loaded URL includes `?close` in its name and use the `.close()` method on the webview to return to your app. – andreszs Jul 08 '18 at 02:33
  • Am trying to display the contents of the website inside of the app. So when you open the app your greeted by the webpage. It shouldn't open an external browser but display within the app itself. – Leone Jul 08 '18 at 02:51
  • Be warned that such behavior won't be welcome by neither the Google Play Store and much less by the Apple Store regulations and policies. You should use webviews only when you absolutely have no other option. – andreszs Jul 08 '18 at 03:03
  • Yes I understand that and have read the policy so am pretty sure that I am on the right side as this is only a part functionalityhttps://stackoverflow.com/questions/29799682/show-a-website-inside-an-ionic-tab that is exactly what am trying to accomplish this method tho doesn't seem to work with ionic 3 – Leone Jul 08 '18 at 03:13