Question

当Fancybox图像处于全屏模式时，初始任务是处理硬件后退按钮。现在，当用户按下电话上的“后退”按钮时，当前页面将更改为上一个页面，全屏图像将停留在前景上。该任务是关闭Fancybox图像并停留在当前页面。我是这样做的：

$(document).on("pagecontainerbeforechange", function (e, data) {
  if (typeof data.toPage == "string" && data.options.direction == "back") {
    if ($(".fancybox-is-open").length) {
      // close fancybox
      $.fancybox.close();

      // stay at current page
      data.toPage = '#' + $.mobile.activePage.data('url');
      $.extend(data.options, {
        changeHash: true
      });
    }
  }
});

Fancybox已关闭，用户停留在当前页面上，但是当他再次单击“后退”按钮时，他将进入页面，该页面在上一个页面之前。如何正确防止页面更改？

Answer 1

当我开始使用fancybox gallery窗口小部件时，问题已自行解决。旧的问题链接是：

<a href="image_thumb" data-fancybox data-caption="caption"><img src="image_full" /></a>

新链接为：

<a href="image_thumb" data-fancybox="gallery" data-caption="caption"><img src="image_full" /></a>

并且不需要js附加代码。

Answer 2

也可能有解决方案。我也有同样的问题。我认为您必须在图像周围添加一个“a”，例如，只有 href 到 #:

<a href="#biggerImage"><img...> </a>

然后你必须创建一个js函数来检测哈希变化。随着哈希更改，您选择您的模式并关闭它。添加这个javascript：

<script type="text/javascript">
     window.onhashchange = function() {
        //console.log(location.hash);  // for debbuging
        if(location.hash=="#biggerImage"){
          $('#myModal').show(); // $ is the jQuery selector - it will see the hash is for opening the image and it will show the Modal
        }
        else{
          $('#myModal').hide(); // $ is the jQuery selector - in the case where the user presses "BACK" button , the hash will not have the #biggerImage anymore, so the code will hide the Modal, giving the effect that the back button closes the Modal 
        }
      }

</script>

在用户按下“BACK”按钮的情况下，哈希将不再有#biggerImage，因此代码将隐藏Modal，给出后退按钮关闭Modal的效果

在JQM中全屏显示Fancybox图像时，如何防止“返回”按钮上的页面更改？

2 个答案: