如何在JQM中全屏显示Fancybox图像时阻止后退按钮上的页面更改？

Posted 2021-05-06

当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关闭，用户停留在当前页面，但当他再次单击“返回”按钮时，他会进入页面，这是在前一页之前。如何正确防止页面更改？

答案

当我开始使用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附加代码。