Question

我有一个视频页面，其上有本地托管视频和3个缩略图，点击后，它们加载到主视频div中 - 这很有用。我唯一的问题是当你加载视频1,2或3时，他们在顶部的网址保持不变。有没有一种深层链接方式，所以url会更改为网站url /＃video-1等等？有一项研究和我目前建立的不确定如何将其整合到其中。任何链接/教程都会很棒

这是我到目前为止所拥有的：

JS：

    //video gallery
     $(".thumbnail-1,.thumbnail-2,.thumbnail-3").on("click", function(event) {
      event.preventDefault();
      $(".main_stage iframe").prop("src", $(event.currentTarget).attr("href"));
      loadURL($(this).attr('href'));
    });
});

Answer 1

可能是这样的：

$(window).load(function() {
    // get hash string eg. #video1
    var hash = window.location.hash;

    if (hash == '#video-1') { // do some checks, you can apply regex or switch
        // I'm not sure what your html looks like
        $(".main_stage iframe").prop("src", $('selector').attr("href"));
        loadURL($(this).attr('href'));
    }
});

$(".thumbnail-1,.thumbnail-2,.thumbnail-3").on("click", function(event) {
    var className = $(this).attr("class"); // get class name of clicked element
    var videoId = className.split("-").pop(); // split string to get video id => "1, 2, 3 etc."

    window.location.hash = '#video' + videoId; // change url to eg. #video1
    event.preventDefault();
    $(".main_stage iframe").prop("src", $(event.currentTarget).attr("href"));
    loadURL($(this).attr('href'));
});

如果您要根据Regex（fiddle here）进行验证，可以使用以下代码：

var hash = window.location.hash;
var regex = new RegExp('^#video-[0-9]{1,10}$');

if (regex.test(hash)) {
   // if hash is something like "#video-[NUMBERS]" then do something
}

网页上的深层链接视频网址

1 个答案: