如何在不刷新页面的情况下更改点击网址？

Question

我设计了一个包含我的 youtube 视频的页面。当您单击标题时，嵌入的视频会在右侧分区发生变化。但问题是 url，我希望用户分享他们想要的视频。如果他们按下后退按钮，他们可以回到上一个视频。我知道我们可以通过 html 5 history api 获得所有这些，但我对此并不陌生，经过我的努力，我无法解决这些问题。请帮忙。

以下是代码：

Youtube 视频页面

<style type="text/css">

    body{
        margin: 0px;
    }

    #leftdiv{
        background-color: #A9F5D0;
        float: left;
        height:100%;
        width: 30%;

    }

    #rightdiv{
        background-color: #F8E0F1;
        float: left;
        height: 100%;
        width: 70%;
    }

    #lectname{
        padding:10px;
        font-family: "comic sans ms";
    }


</style>

<div id="container">

    <div id="leftdiv">

        <div id="lectname">
            <p id="lectname1">Lec 01: What is Signal?</p>
            <p id="lectname2">Lec 02: What is an Analog Signal?</p>
            <p id="lectname3">Lec 03: What is Digital Signal?</p>
            <p id="lectname4">Lec 04: Need of Digital Signal</p>
            <p id="lectname5">Lec 05: Introduction to Digital Electronics</p>
            <p id="lectname6">Lec 06: Switch and Bits Intuition</p>
        </div>          

    </div>

    <div id="rightdiv">
        <iframe width="480" height="270" src="https://www.youtube.com/embed/M0mx8S05v60" frameborder="0" allowfullscreen></iframe>
    </div>  

</div>

<script type="text/javascript">

    var lectureVideos = {
    lectname1: "https://www.youtube.com/embed/M0mx8S05v60",
    lectname2: "https://www.youtube.com/embed/F5h3z8p9dPg",
    lectname3: "https://www.youtube.com/embed/jRL9ag3riJY",
    lectname4: "https://www.youtube.com/embed/izBaDRyqnBk",
    lectname5: "https://www.youtube.com/embed/2xXErGeeb_Q",
    lectname6: "https://www.youtube.com/embed/RF9I6UzI4Rc"
}

var videoLinks = document.getElementsByClassName("videoLink");
for(var i=0; i<videoLinks.length; i++){
    videoLinks[i].onclick=function(){
        document.getElementById("videoFrame").src=lectureVideos[this.id];
    }
}
</script>

Answer 1

您是正确的，您应该使用history API。阅读docs here 会有所帮助。

基本的想法是当你的一个链接被点击时，你应该只调用history.popState。

然后您设置一个window.onpopstate 函数来处理视频更改。这样，无论用户点击链接、后退还是前进按钮，都会调用视频切换函数。

Here is demo code（虽然 url 更改在 jsfiddle 中无法正常工作，因为它在 iframe 中）

这是working example。

// when a video link is clicked, change the URL
var onVideoLinkClick = function(e){

    // did we click on a link with class "video"?
    if( e.target.tagName == 'A' && e.target.classList.contains('video')){
        
    var videoID = e.target.getAttribute('href');
    
    // change the url
    history.pushState(
        {videoID: videoID}, // data
      e.target.innerText,   // title
      'video-'+videoID      // url path
    )
    
    changeVideo(videoID)
    
    e.preventDefault();
  }

}

// change the playing video to a new video ID
var changeVideo = function(videoID){
    var src = 'https://www.youtube.com/embed/'+videoID;
    document.getElementById("videoFrame").src = src;
}

// triggered when clicking on a video using the back/forward browser button 
var onUrlChange = function(e){
  changeVideo(e.state.videoID)
}

// bind the event listners
window.addEventListener('click', onVideoLinkClick);
window.onpopstate = onUrlChange;

使用以下 HTML

<div id="container">

    <div id="leftdiv">

        <div id="lectname">
            <p><a class="video" href="M0mx8S05v60">Lec 01: What is Signal?</a></p>
            <p><a class="video" href="F5h3z8p9dPg">Lec 02: What is an Analog Signal?</a></p>
            <p><a class="video" href="jRL9ag3riJY">Lec 03: What is Digital Signal?</a></p>
            <p><a class="video" href="izBaDRyqnBk">Lec 04: Need of Digital Signal</a></p>
            <p><a class="video" href="2xXErGeeb_Q">Lec 05: Introduction to Digital Electronics</a></p>
            <p><a class="video" href="RF9I6UzI4Rc">Lec 06: Switch and Bits Intuition</a></p>
        </div>          

    </div>

    <div id="rightdiv">
        <iframe id="videoFrame" width="480" height="270" frameborder="0" allowfullscreen></iframe>
    </div>  

</div>