Putting a link into a function

JavaScript
1

I have this link that goes from one iframe to another and it works fine:

<a href="music/playlist.m3u" onclick="parent.document.getElementById('iframe1' 
).contentWindow.PlayM3u(this.href);return false">test</a>

I would like to put it into a function and don’t know how to do it. This is what I’ve got. The getplaylist part works but that’s all. I don’t know how to incorporate the rest of it into the function; but I’ve written it out so that you can see what I want it to.

function Play(){
var file = location.href.substring(location.href.lastIndexOf('/')+1);
var fileName =file.split('.',1);
var getplaylist = [fileName] +  "/" + 'playlist.m3u';
'href=[getplaylist] onclick="parent.document.getElementById
("iframe1").contentWindow.PlayM3u(this.href);return false"';
}

Would someone help me format this correctly?

Thanks

2

If I understand you correctly…


<a href="music/playlist.m3u" class="playerlink">Play this playlist</a>

var anchs = document.getElementsByTagName(‘a’);
for (var i = 0, j = anchs.length; i < j; i++) {
if (anchs[i].className !== ‘playerlink’) continue;
anchs[i].onclick = function() {
parent.document.getElementById(‘iframe1’).contentWindow.PlayM3u(this.href);
}
}



I don't understand what the getplaylist stuff is for, as everything seems to depend on the href attribute of the link. If you want to set the href with javascript, you need a way to identify the correct links somehow.

It's all a bit nebulous at the moment.
3

Thanks for the reply. The html files that will link to this function from an external js have the same name as the subdirectories where the playlist files are. So the getplaylist part gets the music/playlist.m3u based on what html file is currently open in the right iframe.for instance if bandofhorses.html is open in the right iframe, the getplaylist will get bandofhorses/playlist.m3u. That part works.

My problem is I don’t know how to make it into a complete function that would do this:

href="[getplaylist] onclick="parent.document.getElementById('iframe1' 
).contentWindow.PlayM3u(this.href);return false"

And then I would have a link in my image map:

<area shape="rect" coords="0,0,268,268" href="javascript:Play()">
4

I finally got it.

<script type="text/javascript">
function Play(){
var file = location.href.substring(location.href.lastIndexOf('/')+1);
var fileName =file.split('.',1);
var getplaylist = [fileName] +  "/" + 'playlist.m3u';
onClick = parent.document.getElementById('iframe1').contentWindow.PlayM3u
(getplaylist); return false;
}
</script>

And I just call the function from the image map:

<area shape="rect" coords="0,0,268,268" href="#" OnClick="javascript:Play()">

Thanks for your help Raffles. I got the idea for replacing “this.href” with “getplaylist” from you.

5

Sorry if I wasn’t clear about that. I appreciate your help. I had the link up there to show it as it was and working correctly. I was only using the link to get it to work. My goal was to put it into a function. Unfortunately I can’t get the script you posted to work.

6

OK, I understand, but the [getplaylist] bit is unclear. Where is the location going to come from? What is going to replace [getplaylist]?? If you want JavaScript to do it based on the window.location, that’s fine, but you need to be able to target the link, with an ID or something like that.

7

Why do you need the link then? Surely the image map is enough:

<area shape="rect" coords="0,0,268,268" href="#play" id="play">

var playlist_link = document.getElementById('play');
var file = location.href.substring(location.href.lastIndexOf('/')+1);
var fileName =file.split('.',1);
var getplaylist = fileName +  "/" + 'playlist.m3u';
playlist_link.href = getplaylist;
playlist_link.onclick = function() {
  parent.document.getElementById('iframe1').contentWindow.PlayM3u(getplaylist);
  return false;
}
8

There is only one link on each page. I was hoping to be able to call it from my image map with just the function name. like this:

<area shape="rect" coords="0,0,268,268" href="javascript:Play()">

Is that not possible?

9

OK, that’s all fine, but if the function is going to do this, you still need to target the link itself somehow. This is especially necessary if you’re going to have more than one link. If you only have one link, it’s simple enough:

<a href="#" id="playlist_link">test link</a>


var playlist_link = document.getElementById('playlist_link');
var file = location.href.substring(location.href.lastIndexOf('/')+1);
var fileName =file.split('.',1);
var getplaylist = fileName +  "/" + 'playlist.m3u';
playlist_link.href = getplaylist;
playlist_link.onclick = function() {
  parent.document.getElementById('iframe1').contentWindow.PlayM3u(this.href);
  return false;
}
10

the location is going to come from the title of the html page that is calling the function.

var file = location.href.substring(location.href.lastIndexOf('/')+1);
var fileName =file.split('.',1);
var getplaylist = [fileName] +  "/" + 'playlist.m3u'

the first line gets the name of the current html. for instance bandofhorses.html
the second line splits it in half leaving just the name bandofhorses
the getplaylist puts it together and makes the path to my subdirectory bandofhorses/playlist.m3u

If I add an alert it pops up bandofhorses/playlist.m3u

This link works perfectly:

<a href="bandofhorses/playlist.m3u" onclick="parent.document.getElementById( 
'iframe1' ).contentWindow.PlayM3u(this.href);return false">test</a>

But I would like to put it into the function I described.