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/

9

I’m still struggling with this. The Cordova is for opening a browser inside the app. I want to send the user to the system browser (eg Chrome, Safari or whatever the default is). I do NOT want to open the web page inside my app. I have tried doing this from a container control as well as the HTMLview control, using both _blank and _system as the targets. No luck. This seems like such a basic functionality for an HTML interpreter.

10

Could you share your config.xml property under VoltBuilder under Project Properties and Global Code?

11

Try this

<p>Some text <span onclick="openUrl()">Click here </span> some more text</p>
 
openUrl() {
 cordova.InAppBrowser.open("https://www.google.com", "_system");
}

I cant remember if its onclick or onClick.

OR to use the same function for different URLS:

<p>Some text <span onclick="openUrl('https://www.google.com')">Click here </span> some more text</p>
 
openUrl(webUrl) {
 cordova.InAppBrowser.open(webURL, "_system");
}

To test if it works on a Native App, paste this in to the console:

cordova.InAppBrowser.open("https://www.google.com", "_system");

To support Native and Web Apps at the same time:

openUrl(webUrl) {
  if (!window.cordova) { 
     window.open(webURL, "_system");
  } else {
     cordova.InAppBrowser.open(webURL, "_system");
  }
}
13

Let me try to understand what you want to happen here.

  1. You display a paragraph of text in your app, in some sort of container.
  2. There is a link in that paragraph to an external web page with more information.
  3. When the user clicks on that link, the default browser should open that link in a new window. For example, on iOS, it should open the page in Safari.
  4. When the user is done looking at that page, what should happen?

Do I have this right?

14

Hi George, yes, that is correct (1-4). When they are done they should be able to navigate back to my app. Am I thinking about this wrong? Should I instead have a click on that link open an internal browser (HTMLView)? Is that possible?

15

I noticed that when I press and hold the link in my app, then select “Open link” (1st screenshot) it opens the external site but includes a link in the upper left to return to my app (“<< PreventionElderly…” 2nd screenshot). How can I get that behavior without doing the press and hold?

Press and hold link --> Open link works
Press and hold link --> Open link works787×832 123 KB

Note link upper left back to app
Note link upper left back to app781×656 58.1 KB

16

I’m sorry, I have no idea. (This isn’t really a question about AppStudio itself)

17

Didn’t see this earlier. Here is the config.xml:

<?xml version="1.0" encoding="UTF-8"?> {title} {description}
18

This looks very helpful but I’m programming in NS Basic. Is there a way to convert the function in particular to NSB?

openUrl(webUrl) {
  if (!window.cordova) { 
     window.open(webURL, "_system");
  } else {
     cordova.InAppBrowser.open(webURL, "_system");
  }
}
19

Tip : If you’re pasting code, html or config files, surround the code with triple back ticks (```), before the first line and after the last one. It will be formatted properly. (We fixed it for you this time)

20

The easiest way is to not translate it at all: just put it inside a JavaScript/End JavaScript block:

JavaScript
  openUrl(webUrl) {
    if (!window.cordova) { 
       window.open(webURL, "_system");
    } else {
       cordova.InAppBrowser.open(webURL, "_system");
    }
  }
End JavaScript
21

Sorry, don’t recall special symbols to display code. I copy/pasted the code into my frmMain code but it throws this error at the point where the first { is encountered: " code.js. Uncaught SyntaxError: Unexpected token ‘{’. line 3 column 17.

I read the entire entry on JavaScript and it looks like i should be able to just drop it in like this:

Main()
Dim lang = "IT"
JavaScript
  openUrl(webUrl) {
    if (!window.cordova) { 
       window.open(webURL, "_system");
    } else {
       cordova.InAppBrowser.open(webURL, "_system");
    }
  }
End JavaScript
dropTopic.hidden = True
dropTopicItalian.hidden = False