Skip to Content (Press Enter)
2020-03-29 19-08-33
Diana Milheiro
1003Views
10Comments
Solved
Mobile | Open link in device default browser
Question
Mobile
Browsers
Forge

Hello,

I need help with a mobile problem. We have a screen with html from ckeditor when we use the inner html to display the content correctly. However, when we have links, we want to open in default devices browsers, is it possible? At this point, the behavior we have is that it opens in the context of the app and not in the browser of the device.


Thank you!

0
0
10 Jan 2019
Copy Link
2020-03-29 19-08-33
Diana Milheiro
Solution

Hi,


Your code has something wrong with the innerHTML, now we are using this code and is working fine:


links = document.getElementsByClassName("video-content")[0].getElementsByTagName("A");

var i;
for (i = 0; i < links.length; i++) {
links[i].onclick=function(){window.open( this.href, '_system' ); this.href = "javascript:void(0)"; this.preventDefault();};
}


Thanks!

Diana


See solution in context
1
0
10 Jan 2019
Copy Link
2021-04-09 11-42-43
assif_tiger
 
MVP

Diana Milheiro wrote:

Hi,


Your code has something wrong with the innerHTML, now we are using this code and is working fine:


links = document.getElementsByClassName("video-content")[0].getElementsByTagName("A");

var i;
for (i = 0; i < links.length; i++) {
links[i].onclick=function(){window.open( this.href, '_system' ); this.href = "javascript:void(0)"; this.preventDefault();};
}


Thanks!

Diana


That's Great , You resolved it !!

Perhaps I use the one it is working too, you might be missing some param to pass.

No worry :)

Thanks


1
0
10 Jan 2019
Copy Link
UserImage.jpg
Sergio Bessa

Diana Milheiro wrote:

Hi,


Your code has something wrong with the innerHTML, now we are using this code and is working fine:


links = document.getElementsByClassName("video-content")[0].getElementsByTagName("A");

var i;
for (i = 0; i < links.length; i++) {
links[i].onclick=function(){window.open( this.href, '_system' ); this.href = "javascript:void(0)"; this.preventDefault();};
}


Thanks!

Diana


I had a similar requirement and ended up using your code with a minor change.

Instead of this.preventDefault(); I had to use event.preventDefault(); just like this:

links[i].onclick=function(event){
        window.open( this.href, '_system' ); this.href = "javascript:void(0)"; event.preventDefault();
    };


Thanks,

Sérgio

0
0
11 Sep 2019
Copy Link
2018-08-26 20-34-32
Pankaj pant

Hi Diana,

You can use the in-app browser plugin from the forge.


https://www.outsystems.com/forge/component-overview/1558/inappbrowser-plugin


Regards,

Pankaj

1
0
10 Jan 2019
Copy Link
2018-09-06 22-01-31
Viraj Kataria

Hi Diana,

You can do it by

Just follow these steps:

  • Add a Client Action to handle your link's On Click event.
  • Add a JavaScript element to the new Client Action.

JavaScript: window.open('<yourURL>', '_system');
 

Or you can use the above plugin mentioned by Pankaj pant (Thanks)

Hope this help,
Thanks


0
0
10 Jan 2019
Copy Link
2017-09-27 13-30-43
Denis Mulder

Viraj Kataria wrote:

Hi Diana,

You can do it by

Just follow these steps:

  • Add a Client Action to handle your link's On Click event.
  • Add a JavaScript element to the new Client Action.

JavaScript: window.open('<yourURL>', '_system');
 

Or you can use the above plugin mentioned by Pankaj pant (Thanks)

Hope this help,
Thanks


 I don't think the "window.open" javascript works any longer with WKWEBVIEW. See this post: https://github.com/apache/cordova-ios/issues/898 

I used "cordova.InAppBrowser.open" instead and that works.

 

0
0
25 Aug 2020
Copy Link
2020-03-29 19-08-33
Diana Milheiro

Hi,


I don’t have control on the html. I need to replace the link in the html to use that JavaScript. But don’t work. Can you give me an example? 


Thanks!

0
0
10 Jan 2019
Copy Link
2021-04-09 11-42-43
assif_tiger
 
MVP

Diana Milheiro wrote:

Hi,


I don’t have control on the html. I need to replace the link in the html to use that JavaScript. But don’t work. Can you give me an example? 


Thanks!

Hi,

In order to invoke any JS action , you have to declare the specific with the html link.

or We have to map the respective element.id with JS, so that any click trigger it will check at initiate.

Ex: We use onClick() with html Element linke anchor tag to invoke JS.

Can you share some more detail of the html you are getting, so that folks here can hep you easily.

thanks



0
0
10 Jan 2019
Copy Link
2018-09-06 22-01-31
Viraj Kataria

Hi Diana,

Please refer this

  • Local input text variable containerID
  • Local input text variable htmlcontent
  • Local output list variable for multiples link

Javascript:
var el = document.getElementById($parameters.Container);
el.innerHTML = $parameters.HtmlContent;
var tempDiv = document.createElement('div');
tempDiv.innerHTML = $parameters.HtmlContent;
var anchors=tempDiv.getElementsByTagName('a');
var i, len = anchors.length;
var linkArray=[];
for( i = 0; i < len; i++ ) {
   linkArray.push(anchors[i].getAttribute('href'));
   if (i === 0)
   window.open(anchors[i].getAttribute('href'), '_system');
}
$parameters.Links=linkArray.join();

console.log($parameters.Links);

this javascript opens the first link in the browser.

Hope this helps,
Thanks

1
0
10 Jan 2019
Copy Link
2021-04-09 11-42-43
assif_tiger
 
MVP

Hey,
I found the solution for same.

Let me describe from my example:

I have a declare a variable HtmlContent of type text, I am getting HTML content from one of my REST API & once I receive I am binding this to a Container whose Name is HtmlCont.

 I am using the below JS, to set the Attribute of Anchor which is coming in the HTML Content from API. And passing the HTMLContent to JS as an Input Parameter.


SyntaxEditor Code Snippet

var tempDiv = document.createElement('div');
tempDiv.innerHTML = $parameters.HtmlCont;
var anchors=tempDiv.getElementsByTagName('a');
var i, len = anchors.length;

for( i = 0; i < len; i++ ) {
   anchors[i].setAttribute('href', "javascript:window.open('"+anchors[i].getAttribute('href')+"','_system')");
}

document.getElementById('HtmlCont').innerHTML = tempDiv.innerHTML;



I had tested the same now whatever the links I am receiveing in HTMl contnet it is opening in External browser on both Browser & Android Phone.

Cheers

Assif

2
0
10 Jan 2019
Copy Link
2020-03-29 19-08-33
Diana Milheiro
Solution

Hi,


Your code has something wrong with the innerHTML, now we are using this code and is working fine:


links = document.getElementsByClassName("video-content")[0].getElementsByTagName("A");

var i;
for (i = 0; i < links.length; i++) {
links[i].onclick=function(){window.open( this.href, '_system' ); this.href = "javascript:void(0)"; this.preventDefault();};
}


Thanks!

Diana


1
0
10 Jan 2019
Copy Link
2021-04-09 11-42-43
assif_tiger
 
MVP

Diana Milheiro wrote:

Hi,


Your code has something wrong with the innerHTML, now we are using this code and is working fine:


links = document.getElementsByClassName("video-content")[0].getElementsByTagName("A");

var i;
for (i = 0; i < links.length; i++) {
links[i].onclick=function(){window.open( this.href, '_system' ); this.href = "javascript:void(0)"; this.preventDefault();};
}


Thanks!

Diana


That's Great , You resolved it !!

Perhaps I use the one it is working too, you might be missing some param to pass.

No worry :)

Thanks


1
0
10 Jan 2019
Copy Link
UserImage.jpg
Sergio Bessa

Diana Milheiro wrote:

Hi,


Your code has something wrong with the innerHTML, now we are using this code and is working fine:


links = document.getElementsByClassName("video-content")[0].getElementsByTagName("A");

var i;
for (i = 0; i < links.length; i++) {
links[i].onclick=function(){window.open( this.href, '_system' ); this.href = "javascript:void(0)"; this.preventDefault();};
}


Thanks!

Diana


I had a similar requirement and ended up using your code with a minor change.

Instead of this.preventDefault(); I had to use event.preventDefault(); just like this:

links[i].onclick=function(event){
        window.open( this.href, '_system' ); this.href = "javascript:void(0)"; event.preventDefault();
    };


Thanks,

Sérgio

0
0
11 Sep 2019
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.