Question

我试图这样做，当我点击“下一步”按钮时，它会增加变量videoCounter，然后重新加载iframe，以便它播放数组中的下一个视频。目前它似乎只是重新加载整个页面而什么都不做？

<script>
  var videoCounter = 0;
  var videoArray = new Array();
  videoArray[0] = "//www.youtube.com/embed/nEBHkEeH42Y";
  videoArray[1] = "//www.youtube.com/embed/1GlticqrECU",
  videoArray[2] = "//www.youtube.com/embed/BMOUsI8JIaI";

  function Increment() {
    videoCounter++;
    ReloadIFrame();
  }

  function ReloadIFrame() {
    SetCurrentVideo();
    document.getElementById('iframe').contentDocument.location.reload(true);
  }

  function SetCurrentVideo() {
    document.getElementById("iframe").src = videoArray[videoCounter];
  }
</script>

<iframe id="iframe" width="520" height="280" src="SetCurrentVideo();"
frameborder="0" allowfullscreen></iframe>
<ul class="pager">
  <li class="previous disabled" id="videoOlder"><a href="">&larr; Older</a>
  </li>
  <li id="videoTitle">Title here</li>
  <li class="next" id="videoNewer" onclick="Increment();"> <a href="">Newer &rarr;</a>
  </li>
</ul>

Answer 1

目前，页面重新加载是因为点击a标记会导致浏览器将用户发送到链接的目标位置 - 因为您没有在此链接的href中放置网址，目的地是当前页面。

每次加载页面时，videoCounter的值都会重新初始化为0;它似乎重新加载并且什么也不做，因为它总是再次加载第一个视频。

要防止锚点（a标记）的默认行为，您需要处理程序中的return false;：

function Increment() {
    videoCounter++;
    ReloadIFrame();

    return false;
}

更新;您在第二行（逗号而不是分号）上也有语法错误，这可能会阻止定义其余代码。

以下是一个完整的工作示例：

<强> http://jsfiddle.net/UqXVf/1/

iframe视频数组

1 个答案: