PhoneGap/Cordova 2.3.: how to open all external links in InAppBrowser?

Question

I am developing a mobile app using Sencha Touch 2 and Cordova 2.3.0. I would like to be able to open all external links (from dynamically loaded HTML) into the new InAppBrowser.

Is there a way to achieve this without having to modify all external links to contain target="_blank"?

I would like to intercept clicks on external links and open them using the window.open API from InAppBrowser. Since I target both iOS and Android, I guess a javascript solution would be better to avoid separate codes (Java and Objective-C).

Thanks!

update: I just found this: https://gist.github.com/4694032

The only trouble with this is that I don't use jQuery in my app. Is it worth it to include it just for this matter?

Answer 1

Ext.each(Ext.query('a'), function(el) {
    el = Ext.get(el);
    el.on('click', function(e) {
        e.preventDefault();
        console.log('clicked', el.getAttribute('href'));
    });
});

Answer 2

You can also add this event exclusively for attributes(href) that begins with "http", using regexp:

Ext.Viewport.element.dom.addEventListener('click', function (e) {
    if (e.target.tagName !== 'A') {
        return;
    };

    var url = e.target.getAttribute('href');
    var containsHttp = new RegExp('http\\b'); 

    //if href value begins with 'http'
    if(containsHttp.test(url)) { 
        e.preventDefault();
        window.open(url, "_system"); // For iOS
        navigator.app.loadUrl(url, {openExternal: true}); //For Android
    }
    else {
        return;
    }
}, false);

Then you can build for android and iOS at the same time.