Перезагрузить родительскую страницу при закрытии 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

Просто используйте afterClose callback для выполнения вашего кода после закрытия модального

$('[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

Согласно документации, вы можете добавить прослушиватель событий к вашему экземпляру fancybox и прикрепить его к обратному вызову, который перезагрузит страницу для вас:

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

        }
    });

Answer 3

Попробуйте это

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