614
Views
10
Comments
Solved
Mobile | Open link in device default browser

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!

Rank: #431
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


Rank: #38

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

Rank: #345

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


Rank: #431

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!

Rank: #345

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

Rank: #82

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

Rank: #431
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