利用history实现手机单HTML点击物理返回按钮仍在当前页

目标：目标是在手机浏览器打开一个单页HTML，然后点击可以查看一个视频video。然后可以关闭video仍然在原页面。

问题：本来不是什么大事，但是由于video在各种手机浏览器上表现不太一样而且层级很高，我本来想通过定位一个div或者img来通过点击事件隐藏video，但video的高层级会覆盖在这之上导致失效，如果用fixed的方式控制video外层的位置还是有些浏览器会在全屏时覆盖（很多浏览器对video进行了自定义样式，我使用的video.js的样式被覆盖）。我又想是不是可以监听手机返回按钮来触发隐藏这个video，但是返回会让整个页面关闭。

 

解决方案：利用history来实现

当打开video时用

let stateObject = { id: 1 };
history.pushState(stateObject, "video", "#Player");

pushState 相当于在访问历史中放置了一个新路径，这三个参数分别是，状态（json对象，内容随意），标题，路径。其中路径不能传空字符串，否则，不会认为这是一个新的记录，而我们又不想脱离当前HTML，所以可以在后面加个#name这类标记即可。

这时我们的历史记录里就多了一条，当用于点击返回或者手机物理返回时监听事件，

window.addEventListener('popstate', function (event) {
    //doIt();
});

就可以在你自己的doIt方法中控制显示隐藏，而我们的基础页面不会变动。