This is a migrated thread and some comments may be shown as answers.

Opening app links in ios web browser

3 Answers 391 Views
Apache Cordova
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Christian
Top achievements
Rank 1
Christian asked on 16 Dec 2013, 10:49 AM
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.)

3 Answers, 1 is accepted

Sort by
0
Christian
Top achievements
Rank 1
answered on 16 Dec 2013, 11:07 AM
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
0
Yelitza
Top achievements
Rank 1
answered on 08 May 2017, 12:06 AM

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... 

0
Martin
Telerik team
answered on 10 May 2017, 02:04 PM

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.

 
Tags
Apache Cordova
Asked by
Christian
Top achievements
Rank 1
Answers by
Christian
Top achievements
Rank 1
Yelitza
Top achievements
Rank 1
Martin
Telerik team
Share this question
or