在移动端的时候(特别是在一体机上–android系统),iframe视频播放时按返回键时会将视频携带回去,就导致了用户的体验很不好。导致这个原因是因为视频播放时,在android上是全屏播放,导致视频脱离了原先的文档流,所以在返回时就直接携带过去了。
个人原先思考的方向:
能不能再监听手机返回事件时将该页面刷新后再强制返回到上一页面,结果就导致在该页面到首页的一系列的返回之路上就必须全都写死,而且在首页返回时得禁止掉返回事件,这样的结果在微信端上的体验会很僵硬了,且在首页返回时返回不了(写死禁止了)。
脱离文档流的启发
既然之前的方法行不通,也一直在纠结文档流这个问题(原谅一个小白的辛苦)。就想着在返回的时候将这个脱离文档流视频移除掉,这样就不会携带过去了!下面是完整代码
$(function(){
pushHistory();
window.addEventListener("popstate", function(e) {
$("iframe").remove();
setTimeout(function () {
window.history.go(-1);
},100);
}, false);
function pushHistory() {
var sta = {
title: "title"
};
if( window.history.state === null )
{
window.history.pushState( sta, "title" );
}
}
});