Passing urls to javascript from html

Question

On my page I have a section where I would like to pull in various RSS feeds.

I don't want to pull in the feeds using PHP because my page will then be affected by how long it takes to get a response back from each server.

Instead, what I would like to do is put the RSS feed URLs on the page and have Javascript pick them up and pull in the content.

The Javascript side of the solution is no problem but I can't find a solution for passing the URLs from HTML to JS that I'm happy with. Ideally I wanted something like...

<div>
    <param name="url" value="/url/of/some/feed">
    <param name="url" value="/url/of/some/other/feed">
</div>

but I realise this isn't valid.

Anyone have any nice solutions? (ps. I don't want to write JS in my view files)

Answer 1

Use the data attribute, then you can use something like this :

<div>
    <span class="rss" data-url="/url/of/some/feed"></span>
    <span class="rss" data-url="/url/of/some/other/feed"></span>
</div>

Then you can loop the DOM elements with a class of rss and get the data-url attribute of each - the span could be any HTML element

Nice explanation of on data attributes here

The official HTML5 docs on the custom attributes is here - but they work in any browser in any HTML version - using the getAttribute() method