移动端图片打开及返回客户端

场景:客户端进入webview,打开H5页面,页面中有图片,点击图片全屏打开,点返回键,返回H5页面,再点返回键,返回客户端。页面中有同这个页面一样url的跳转链接

中间折腾了一会,现在把思路记录下来

1,进入H5页面,打开图片

$('.screenhots').on('click', '.screenshot-img', function () {
              window.history.replaceState({page : 'detail'}, '', ''); //返回时用到
              window.history.pushState('forward', null, 'detail.html?style=orange#showpic');
})
增加pushState 和replaceState
2,监听返回
// 监听手机回退
      if (window.history && window.history.pushState) {
        $(window).on('popstate', function (e) {
          if (e.state.page == 'detail') {
            $('#showpic').css('zIndex', '0').hide();
          }else{
            $('.back').click();
          }
        });
      }
3,为解决返回时,有很多历史记录,使用replace解决
 window.location.replace('detail.html');

你可能感兴趣的:(移动端图片打开及返回客户端)