javascript - 如何将 window.location 与随机对象一起使用？

Question

我制作了一个随机化 HTML 视频或图像的网站，只是为了练习我的 JavaScript。

我试图做到每次视频随机化时，URL 位置都会更改以代表新视频，这样用户就可以直接链接到随机化的视频。

目前，它仅显示静态 URL，无论何时加载内容，该 URL 都不会更改。

这是必需的代码笔

Codepen

 function chooseRandomVideoFromList() {
  var i = Math.floor(Math.random() * currentList.length);
  var video = currentList[i];
  var $video = $('video');



  // clear
  $video.html('');

  // <source src="" type="">

  video.sources.forEach(function (source) {
    var $source = $('<source>').attr('type', source.type).attr('src', source.src);
    $video.append($source);
  });

任何帮助或建议将不胜感激，我已阅读文档，但我仍然感到困惑:S

谢谢大家!

Answer 1

您不能直接在 window.location.href 属性上写入，但您可以使用 html5 历史记录 api 和 Pushstate 更改您的站点 URL。

示例:

history.pushState({}, "Stackoverflow", "http://stackoverflow.com");

这应该适用于所有现代浏览器，请参阅:http://caniuse.com/#search=pushstate

有关此主题的更多信息可以在此处找到:https://developer.mozilla.org/de/docs/Web/Guide/DOM/Manipulating_the_browser_history

但请记住，如果您希望用户能够使用浏览器的后退和前进按钮，您还需要监听 popstate 事件。您的服务器端代码也需要处理 url。

如果您需要支持较旧的浏览器或不希望服务器端参与，您可以设置 window.location.hash 属性，该属性不会更改 url 本身，但可以更改当前 url 的哈希部分，例如:

window.location.hash = "uri=stackoverflow.com";

这样您就可以存储当前显示的视频的索引。加载页面时，您可能需要检查“window.location.hash”中是否有值以及它是否是视频文件的有效索引。如果是这样，您应该播放该视频。

示例(插入您的起始代码):

 if (window.location.hash !== "") {
    showSpecificVideoFromList(window.location.hash);
 }

您的 selectRandomVideoFromList 中的这个:

 window.location.hash=i;

然后实现您的 showSpecificVideoFromList 以显示给定的索引(并检查有效性)