Opening an external browser from app

1

My app is basically a series of containers each containing 500 to 1000 words of text formatted as HTML. The HTML includes links to external Web pages using the target=“_blank” in the href tag. But when I click on the link in my iOS app, it opens within the app instead of opening an instance of the default browser on my iPhone. Is it possible to open an external browser from a hyperlink in a container?

2

Are you running as a native app or a web app?

3

Native app. Works fine as a Web app

4

I haven’t tried this myself, but there is an InAppBrowser plugin which looks like it should work:

5

With the In App Browser plugin, “_system” is the target to open in the devices default browser.

<p>some text <span id="myUrl">https://www.website.com</span> some more text</p>
function myUrl.onclick() {
 cordova.InAppBrowser.open("https://www.website.com", "_system");
}

OR (not tested)

<p>some text <a href="https://www.website.com" target="_system"</a> some more text</p>

might work without the plugin.

6

I really appreciate the help but I’m afraid that didn’t work. I have added this code to config.xml in the VoltBuilder Properties:

<plugin name="cordova-plugin-inappbrowser" />
<allow-navigation href="*" />
<access origin="*" />

And when I just add this line to my code it goes to the link but it still just “takes over” my iOS app. There is no way to go back or close and it does not open a separate browser window:

window.open("https://www.escardio.org/Guidelines/Clinical-Practice-Guidelines/CVD-Prevention-Guidelines", "_system", "location=yes")

I also tried what you suggest above in the content property of my container where the HTML sits and inserted this into the HTML:

<p>some text <span id="myUrl">https://www.google.com</span> some more text</p>
function myUrl.onclick() {
 cordova.InAppBrowser.open("https://www.google.com", "_system");
}

But nothing happens, it doesn’t even create a hyperlink. Should there be an href in there?

Thanks! Mark

1 Like
7

This code works to open the CNN site, but again it takes over the entire app instead of opening a separate instance of Chrome or Safari:

<a href="#" onclick="window.open('http://www.cnn.com', '_system', 'location=yes');">Click here for link</a>

Any help appreciated. The HTML is stored in the content field of a container control. The goal of the free app is to summarize screening/prevention recommendations for Italian seniors. I am a physician/researcher developing it with an Italian university. I’d really like to get it to work!

Mark

8

Have you reviewed the documentation for the InAppBrowser plugin? Look at the sample for implementing help pages using external content
https://cordova.apache.org/docs/en/12.x/reference/cordova-plugin-inappbrowser/