0

I've working on an app, that takes data from a RSS feed (xml), this means I don't have control of what comes with it, I'm using the Google Api for feeds to retrieve the data in JSON format, and I'm using jQuery (feeder.js) to generate the resulting html with the info.

The resulting html goes inside my PhoneGap project, and everything works just fine.

The only problem now is that inside the info retrieved from the RSS, sometimes theres some links going anywhere (eg: facebook, twitter, personal sites, newspapers, etc).

The feeder provides all the content inside an element, containing the titles, paragraphs, links and such.

What I need now, is a way to target this links inside the articles, and call the window.open event, or whatever works to open the link in an external browser.

The html structure generated by feeder.js goes like this:

<article>
    <h2>Title</h2>
    <p>Content</p>
    <a href="http://facebook.com">This link here!</a>
    <p>More content</p>
</article>

As you can see, theres no class or id, to target a single element, as they appear as pointed here.

I'm working with the latest versions of Android SDK and PhoneGap to this date.

Basically what I need to do, is to target the element < a > within the < article > and give them the new browser window event.

Best regards to anyone who takes a minute to help me, cheers!

user3246207
  • 31
  • 6

2 Answers2

3

After researching a lot here and google, I came up with the following.

Along with the content displayed in my app, there is a back button, with an onClick event, I used this button to define a function and call the event targeting the link inside the article. By the way the button had a # href attribute.

After doing this, I added the onClick event via "attr", and later left the href attribute with a #.

The script goes as follows: 

   function button(){
        var button = $(location).attr('href');
        button = button+'#';
        $('#articles a').each(function(){

              if(this != button){
                    $(this).attr("onClick", "navigator.app.loadUrl('"+this+"', { openExternal:true });");
                    $(this).attr("href", "#");  
                }
            });
    }

Inside the onClick, I called the event for opening the new browser window, which in my version of phonegap was "navigator.app.loadUrl"

Now every time the html loads the RSS feed content, and it comes with some link inside it display this:

< a onclick="navigator.app.loadUrl('https://google.com/', { openExternal:true });">Link< /a>

This opens a dialog box, where the user can pick the browser he wants to use.

Thanks again to the people taking the trouble to answering my question!

user3246207
  • 31
  • 6
0

If you use Jquery you can use this function : 

<script> 
   $(document).on('click', 'a', function(e) {
      if ($(this).attr('target') !== '_blank') {
         e.preventDefault();
         window.location = $(this).attr('href');
      } 
   });
</script>

Be sure to add rel="external" in the <a> tag if you use also jQuery Mobile within your app. Hope it helps, ask if something is not working. Happy coding!

Radu Turtoi
  • 189
  • 9
  • Thanks for the advice, but I dont use JQM, anyway I'll try your solution in a different project, and see how it goes – user3246207 Jan 29 '14 at 15:05
  • The function works without JQM. So is it working for you? If yes, mark my answer the correct one. You could add on('click', 'article a', function(e) – Radu Turtoi Jan 29 '14 at 22:23