External links using Telerik Platform/Cordova without OnClick on link

[Carlos]

We are using Telerik Platform, which runs on Cordova. We have dynamically pulled content from a CMS that shows some of our content in our app. Our authors want to put links in the content, but of course, I don't want them having to put an 'onclick' on the links in the Rich Text Editor in the CMS.
Is there a way to allow our authors to just enter links with a CSS class added to them or something like that, that I can capture the click, using jQuery or something, and have the link get translated in the Cordova app to open the "_system" browser.

I ultimately want my links to look like this for my authors to use when they enter them into the CMS:

<a href="http://mylink.com" target="_blank" class="externalLink">My external link</a>

But in the PhoneGap/Telerik Platform app, I want the link to open in the system browsers. Which currently it is not, it is opening in the current webview and locks the app into the webpage without any way of getting back.
I tried this so far but to no avail. It seems like the 'href' just triggers the browser to go and then the app gets caught in the webview browser and won't go back without force quitting the app.

 

//IN THE APP JS ITSELF
   //Don't even think this works
 $('a.externalLink, a[target="_blank"]').on('click', function(e){
   e.preventDefault();// Does not prevent default
   console.log("trying to get system");//Does not console
   alert("prevent default"); // Does not alert
   window.open($(this).attr('href'), '_system');
    return false;
 });

 

It seems that the link that gets entered into the CMS just directs to the 'href' link and ignores the above jQuery. Any way to catch it before the webview catches it?

[Tsvetina]

Hi Carlos,

What I tried in my test app and it worked is:

$(".externalLink").click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    window.open(e.currentTarget.href, "_blank");
});

However, the most important thing is that this code runs after the external content has loaded. Have you debugged your app to confirm that the jQuery selector returns any result before you attach the click event?

In my app, where I render my external content inside a Kendo UI Mobile ListView, I wait for the ListView to bind and then add a small timeout to ensure content is rendered.

You can find a sample project attached where I open your exact same link in the InAppBrowser. I hope this solution works for you, too.

Regards,
Tsvetina
Telerik