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

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

试试这个

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

Answer 2

只需在模式关闭后使用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 3

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

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

        }
    });

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

Reload parent page on closing Iframe- Fancybox

html

jquery

fancybox-3