Question

我在一个新项目中使用了FancyBox3。现在，当iframe页面关闭时，我需要刷新父页面。

$('[data-fancybox]').fancybox({
  toolbar: false,
  smallBtn: true,
  iframe: {
    preload: false
  },
  fullScreen: {
    autoStart: true
  }
});

.fancybox-slide--iframe .fancybox-content {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a data-fancybox data-type="iframe" data-src="https://fancyapps.com/fancybox/3/docs/" href="javascript:;" type="button" class="btn btn-info" title="Show ">
  <i class="nav-icon  i-Home-Window fa-4x "></i>
</a>

Answer 1

在模式关闭后，只需使用afterClose回调来执行代码

$('[data-fancybox]').fancybox({
  toolbar: false,
  smallBtn: true,
  iframe: {
    preload: false
  },
  fullScreen: {
    autoStart: true
  },
  afterClose : function() {
    alert(`Closing!`);
    window.location.reload();
  }
});

演示-https://codepen.io/anon/pen/MMGejB（节点：禁用Codepen的页面重新加载）

Answer 2

尝试

$('[data-fancybox]').fancybox({
toolbar: false,
smallBtn: true,
iframe: {
    preload: false
},
fullScreen: {
    autoStart: true
},
afterClose: function(instance, slide) {
    window.location.reload();
}
});

Answer 3

根据文档，您可以将事件侦听器添加到fancybox实例，并将其附加到将为您重新加载页面的回调中：

$("[data-fancybox]").fancybox({
        afterClose: function( instance, slide ) {
       //To reload the page
        window.location.reload();

        }
    });

关闭iframe时重新加载父页面-Fancybox

3 个答案: