Web View in ionic 2 (Open simple html files from assets )


After wondering a lot to have ionic WebView, I come to get this task done by using these steps-

  1. install inappbrowser in the application by using this path, and follow the steps to get install.
  2. make sure you have all html, images and css in assets directories
  3. for eg-
  4. www/assets/html.
  5. www/assets/css.  
  6. www/assets/images etc..
  7. open file where your want to access the view from assets and type

<a class=”item” href=”#” onclick=”window.open(‘http://www.nraboy.com/contact&#8217;, ‘_self’, ‘location=yes’); return false;”>
External Link Profile
</a>
<a class=”item” href=”#” onclick=”window.open(‘http://localhost:8100/ionic-lab&#8217;, ‘_self’, ‘location=yes’); return false;”>
Local Link of app
</a>

<a class=”item” href=”#” onclick=”window.open(‘/assets/challenge/my-page.html’,’_self’);”>
Open page
</a>

  1. make sure that link format must be in bellow format as-
    var ref = cordova.InAppBrowser.open(url, target, options);
  2. where –
    • ref: Reference to the InAppBrowser window when the target is set to '_blank'. (InAppBrowser)
    • url: The URL to load (String). Call encodeURI() on this if the URL contains Unicode characters.
    • 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.
      • _blank: Opens in the InAppBrowser.
      • _system: Opens in the system’s web browser.
    • options: Options for the InAppBrowser. Optional, defaulting to: location=yes. (String)
  3. read the document carefully which will help you to get the task done.

Have a nice day!!!