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?

No it's not worth it. Should be easy to convert the script. Btw if you've found the answer pls post an answer quoting the code from external sites. — Stephan Bönnemann-Walenta, Feb 02 '13 at 21:52
Thanks. I found the link I posted through google, not through SO. — borck, Feb 02 '13 at 23:34

score 3 · Accepted Answer · answered Feb 02 '13 at 23:01

3

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

answered Feb 02 '13 at 23:01

rdougan

7,217
2
34
63

That works great, but I still have a problem. My app connects to php scripts to fill stores with, among others, html data to display is several pages of the app. Is it possible to get all the '' elements in one query and not only the one displayed on the current page? In other words, is it possible to query all external links of the app at once? – borck Feb 02 '13 at 23:32

Samukbg · Answer 2 · 2013-12-18T00:37:21.163

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.

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

2 Answers2

Linked