Question

在下面的代码中，当您单击该链接时，它会按预期将iframe src属性与另一个视频交换出来。我觉得奇怪的是它似乎在我的浏览器中创建了一个历史记录，允许我在两个视频之间前后导航。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
<title>Test</title>
<script>
$(document).ready(function() {
    $("#link").click(function(e) {
        e.preventDefault();

        var url = $("#link").attr('href');
        $("#video").attr('src', url);
    });
});
</script>
</head>
<body>

<iframe id="video" width="560" height="315" src="//www.youtube.com/embed/eef3bRjYTYg" frameborder="0" allowfullscreen></iframe>

<p><a id="link" href="//www.youtube.com/embed/0h6nInv4RY4">Click me</a></p>

</body>
</html>

但是，如果我更新代码，通过将iframe包装在div中并替换该div的全部内容（而不是仅仅更改src属性），它会在没有浏览器历史记录的情况下交换视频。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
<title>Test</title>
<script>
$(document).ready(function() {
    $("#link").click(function(e) {
        e.preventDefault();

        var url = $("#link").attr('href');
        $("#video").html('<iframe width="560" height="315" src="' + url + '" frameborder="0" allowfullscreen></iframe>');
    });
});
</script>
</head>
<body>

<div id="video">
<iframe width="560" height="315" src="//www.youtube.com/embed/eef3bRjYTYg" frameborder="0" allowfullscreen></iframe>
</div>

<a id="link" href="//www.youtube.com/embed/0h6nInv4RY4">Click me</a>

</body>
</html>

这是预期的行为还是任何人都可以向我解释为什么会这样？

使用JQuery更新iframe时的奇怪行为

0 个答案: