使用JavaScript更改iframe src

Question

I have three different pages; player_lo.html , player_hi.html and player_med.html .

These three pages are different quality flow player stream pages. I want to use JavaScript to change an iframe 's source.

I have this script but it doesn't work:

<a href="/player/player_lo.html" class="button grey" onclick="$('#player').attr('src', 'player_lo.html'); $(this).parent().find('a').removeClass('red'); $(this).parent().find('a').addClass('grey'); $(this).addClass('red').removeClass('grey'); return false;">Low Quality</a>
<a href="/player/player_med.html" class="button red" onclick="$('#player').attr('src', 'player_med.html'); $(this).parent().find('a').removeClass('red'); $(this).parent().find('a').addClass('grey'); $(this).addClass('red').removeClass('grey'); return false;">medium quality</a>
<a href="/player/player_hi.html" class="button grey" onclick="$('#player').attr('src', 'player_hi.html'); $(this).parent().find('a').removeClass('red'); $(this).parent().find('a').addClass('grey'); $(this).addClass('red').removeClass('grey'); return false;">high quality/a>

For an example of what I'm trying to do, look at this: http://slon.ru/tvrain/
When you click on Низкое качество - it's another frame, if next, another etc...

Answer 1

You're using absolute paths in the href of your links (eg "/player/player_lo.html" ), but relative paths in you JavaScript (eg 'player_lo.html' ). This might be your problem.

• Try using the same (absolute) paths in your JavaScript.
• Make sure the pages actually exist.
• Keep an eye on your browser's error console to see what is going wrong.

Other tips you might find helpful:

Instead of two classes called red and grey (which are mutually exclusive classes, meaning a button can't be both at the same time), try using a single class which describes the difference, eg active . Then, use CSS to style buttons to be grey by default, or red when they have the class active . Added advantage is that the colours are not encoded in the class names (eg you can change the active color to blue, or whatever, in the future).

Also, instead of using the inline onclick attribute, try binding the event hander to the <a> tags from JavaScript itself . That way, you can easily use the <a> 's existing href , plus you can reuse the code needed to make the clicked button active.

HTML:

<a href="/player/player_lo.html" class="button">Low Quality</a>
<a href="/player/player_med.html" class="button">medium quality</a>
<a href="/player/player_hi.html" class="button">high quality/a>

JavaScript:

$('.button').click(function(event) {
    var button = $(this);
    $('#player').attr('src', button.attr('href'));
    makeActive(button);
    return false;
});

function makeActive(button) {
    $('.button').removeClass('active');
    button.addClass('active');
}

CSS:

.button {
    color: grey;
}
.button.active {
    color: red;
}

Documentation:

• jQuery .click()