Question

我有三个不同的页面; player_lo.html，player_hi.html和player_med.html。

这三个页面是不同质量的流媒体播放器页面。我想用JavaScript来改变iframe的来源。

我有这个脚本，但它不起作用：

<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>

有关我正在尝试做的一个例子，请看一下：http://slon.ru/tvrain/
当你点击Низкоекачество时 - 它是另一帧，如果是下一帧，另一帧等......

Answer 1

您在链接的href中使用绝对路径（例如"/player/player_lo.html"），但在JavaScript中使用相对路径（例如'player_lo.html'）。这可能是你的问题。

尝试在JavaScript中使用相同的（绝对）路径。
确保页面确实存在。
密切关注浏览器的错误控制台，看看出了什么问题。

您可能会发现有用的其他提示：

而不是两个名为红色和灰色的类（它们是互斥类，意味着一个按钮不能同时出现），请尝试使用单个类描述差异的类，例如的活性即可。然后，使用CSS将按钮设置为默认为灰色，或者当它们具有类active时为红色。附加的优点是颜色不会在类名中编码（例如，您可以将活动颜色更改为蓝色，或将来更改为其他颜色。）

此外，请尝试将事件处理程序绑定到onclick标记from JavaScript itself，而不是使用内联<a>属性。这样，您就可以轻松使用<a>现有的href，此外，您还可以重复使点击按钮处于活动状态所需的代码。

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;
}

文档：

jQuery .click()

使用JavaScript更改iframe src

1 个答案: