javascript - 单击链接时如何使 url 唯一

Question

我在一个名为list.php的页面中有这样的代码，当我点击一个链接时，iframe中的视频被更改为我选择的视频，但在地址栏中它仍然是list.php，我怎样才能使url成为列表.php/Anohana10？或者类似的东西？

<script>
    $(document).ready(function(){
    $("ul#videos li a").click(function(e) {
        e.preventDefault();

        $("#video").attr("src", $(this).attr("href"));
    })
});
</script>

<div class="videoWrapper">
    <IFRAME  id="video" SRC="http://upload4free.co/embed-trdcgvsgf0tj-500x300.html" FRAMEBORDER=0  
        webkitAllowFullScreen ></IFRAME>
    </div>

<ul id="videos">
    <li><a id="Anohana10" href="http://upload4free.co/embed-ndi71khpdvbf-580x300.html">Anohana Episode 10</a></li>
    <li><a id="Anohana9" href="http://upload4free.co/embed-flm2y2648udr-580x300.html">Anohana Episode 9</a></li>

Answer 1

您可以，而不是拦截 <a>重定向页面的默认行为，让它锚定信息，例如 <a id="Anohana10" href="#Anohana10"> ，那么您的页面网址将如下所示: list.php#Anohana10 .

iframe 的链接信息，您可以存储在另一个自定义属性上(假设 data-url )，并使用 jquery 函数检索它:

<script>
    $(document).ready(function(){
    $("ul#videos li a").click(function(e) {
        $("#video").attr("src", $(this).attr("data-url"));
    })
});
</script>

<div class="videoWrapper">
    <IFRAME  id="video" SRC="http://upload4free.co/embed-trdcgvsgf0tj-500x300.html" FRAMEBORDER=0  
        webkitAllowFullScreen ></IFRAME>
    </div>

<ul id="videos">
    <li><a id="Anohana10" href="#Anohana10" data-url="http://upload4free.co/embed-ndi71khpdvbf-580x300.html">Anohana Episode 10</a></li>
    <li><a id="Anohana9" href="#Anohana9" data-url="http://upload4free.co/embed-flm2y2648udr-580x300.html">Anohana Episode 9</a></li>

编辑

要在直接键入 URL 时获取 anchor ，请将其添加到 ready jquery方法:

$(document).ready(function(){

    var identifier = window.location.hash;
    if(identifier != "")
        $(identifier).click();

    $("ul#videos li a").click(function(e) {
    ...
});

这将得到 #id从url中，点击对应的<a>标签，正在加载视频...