Opening app links in ios web browser

4 posts, 0 answers
  1. Christian
    Christian avatar
    2 posts
    Member since:
    Oct 2013

    Posted 16 Dec 2013 Link to this post

    Hi,

    I'm using Icenium with jQuery Mobile and Cordova and want a link on one of the pages to open in the device's web browser instead of in the "app" itself. The code below shows what I'm trying. The most annoying thing of all is that it works fine in Icenium Ion, but fails when the app is published through iTunes.

    Can anybody suggest what I'm doing wrong or how to set this up correctly? Is the difference between Ion and "my app" relevant? Perhaps there's some permission I need to set in Icenium Mist when building the app? (at the moment I have not ticked any of the checkboxes for plugins)

    HTML of the link itself:

        <div id="home" data-role="page">
          <div data-role="content">
          ...page content in here...
          <div data-role="footer" data-position="fixed" data-id="common-footer" data-theme="a">
            <div data-role="navbar">
              <ul>
                ... other links ...
                <li><a href="http://www.example.com" data-icon="link" class="external-link">Website</a></li>
              </ul>
            </div>
          </div>
        </div>


    JavaScript to change the link's behaviour:

    $(document).ready(function(){
      $('.external-link').on("click", function(e) {
        var targetURL = $(this).attr("href");
        var ua = navigator.userAgent.toLowerCase();

        if (ua.indexOf("android") > -1) {
          e.preventDefault();
          navigator.app.loadUrl(targetURL); // Android only
          return false;
        } else if (ua.indexOf("ipod")>-1 || ua.indexOf("iphone")>-1 || ua.indexOf("ipad")>-1) {
          e.preventDefault();
          window.open(targetURL, "_system");
          return false;
        }
      });
    });

    Thanks in advance for any help that can be shed on this!


    Christian

    (As a side note, the reason I want to open it in the app's browser is so that (a) it has a 'window' which allows pinch zoom, when the app itself is fixed and (b) so there's a way "back" to the app.)

  2. Christian
    Christian avatar
    2 posts
    Member since:
    Oct 2013

    Posted 16 Dec 2013 Link to this post

    Hmm... just saw a comment on a reply on Stack Overfow suggesting that one needs to enable the "InAppBrowser" to enable out-of-app links. I've done this and republished the app so lets see if that helps!

    http://stackoverflow.com/questions/17971811/cordova-3-0-open-link-in-external-browser-in-ios

    http://cordova.apache.org/docs/en/3.1.0/cordova_inappbrowser_inappbrowser.md.html#window.open
  3. Yelitza
    Yelitza avatar
    1 posts
    Member since:
    May 2017

    Posted 07 May in reply to Christian Link to this post

    I have the exact same problem! I want to force links to open in the phone web browser instead than in the in-app browser!

    did you achieved this? How? 

    I need to solve this in cuatom html pages of the app, it just opens the page in a full screen and the only way to go back to app is closing it and open it again... 

  4. Martin
    Admin
    Martin avatar
    89 posts

    Posted 10 May Link to this post

    Hi,

    As Christian noted, I would suggest to use Cordova InAppBrowser plugin  - this plugin is used for opening web browser from a Cordova app. Here is more information on adding Cordova Core plugins to your hybrid project.

    You may review the InAppBrowser sample app here.

    In general in a Hybrid app you have a starting/main index.html and when you navigate to different views, the same index.html gets different DOM elements added/hidden and thus different views are shown/removed. Thus a Hybrid app is similar to a single-page application - you navigate through the different DOM elements of that page and not through different pages.

    All app logic is saved in window.app object which is connected to the main index.html. Therefore, when you navigate to a different .html page using window.location for example, all data and methods are lost (window.app object is lost as well as all methods and data saved, as if the application is closed). For the above reason you may consider using Cordova InAppBrowser plugin for opening external resources inside a Hybrid app.

    I hope this has helped.

    Regards,
    Martin
    Telerik by Progress
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
Back to Top