Fancy Box - как обновить родительскую страницу при закрытии всплывающего окна iframe?

Question

Я хочу, чтобы моя родительская страница обновлялась при закрытии всплывающего окна Fancy Box. У меня есть страница входа во всплывающем окне, поэтому мне нужно обновить родительскую страницу, чтобы показать новое состояние входа при закрытии Fancy Box.

---

Я могу заставить его работать без кода iFrame:

<script type="text/javascript">
 $(document).ready(function() {
  $("a.iframeFancybox1").fancybox({
   'width': 800,
   'height': 450,   
   'onClosed': function() {   
     parent.location.reload(true); 
    ;}
   });
 });
</script>

---

Но я не могу заставить его работать с кодом iFrame:

<script type="text/javascript">
 $(document).ready(function() {
  $('a.iframeFancybox1').fancybox({
   'width': 800,
   'height': 450,
   'type' : 'iframe'
   'onClosed': function() {
     parent.location.reload(true); 
    ;}
   });
 });
</script>

---

Проблема связана с этой строкой:

'type' : 'iframe'


Как только я добавляю эту строку, всплывающее окно перестает работать.

Может кто-нибудь предложить решение относительно того, как я могу заставить iframe всплывающее окно в Fancy Box и по-прежнему обновлять родительскую страницу при закрытии коробки? Спасибо!

Answer 1

$(".fancybox").fancybox({
    type: 'iframe',
    afterClose: function () { // USE THIS IT IS YOUR ANSWER THE KEY WORD IS "afterClose"
        parent.location.reload(true);
    }
});

В качестве альтернативы:

Перейдите к вашему jquery.fancybox.js файлу и перейдите в строку 1380 , это похоже на это и добавьте parent.location.reload(true);

afterClose: function (opts) {
    if (this.overlay) {
        this.overlay.fadeOut(opts.speedOut || 0, function () {
            $(this).remove();
            parent.location.reload(true);
        });
    }
    this.overlay = null;
}

Answer 2

$(".fancybox").fancybox({
            'width'             : '75%',
            'height'            : '65%',
            'autoScale'         : false,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'type'              : 'iframe',
            'hideOnOverlayClick': false,
            'onClosed'          : function() {
                                  parent.location.reload(true);
                                  }
        });

Answer 3

Помимо очевидного отсутствия, которое, как вы говорите, исправили IMO, это не проблема fancybox, а скорее проблема обновления родительского элемента.

Мне показалось, что сложно получить родителя фрейма дляперезагрузите, так как есть несколько способов «теоретически» добиться этого, но «большинство» просто НЕ работают на практике, и еще хуже, но в веб-браузерах, с которыми я тестировал, действительно не возникает никаких ошибок.

Вот код, который хорошо работает для меня в Chrome, FF, IE:

afterClose: function(){
    parent.location.href = parent.location.href;
},

В основном это говорит о том, что установите родительский href на то, чем он является в настоящее время, что в действительности приводит к обновлению страницы.Попробуйте, и это должно работать хорошо.

На самом деле строка:

parent.location.href = parent.location.href;

может использоваться с фреймами (от родителя, конечно) или без фреймов для простого обновления веб-страницы.,НТН.

Answer 4

Для меня следующий код работает нормально:

$("a.ic-edit").fancybox({
            'width'     : '65%',
            'height'    : '85%',
            'autoScale'     : false,
            'titleShow' : false,
            'transitionIn'  : 'no',
            'transitionOut' : 'no',
            'scrolling'     : 'no',
            'type'          : 'iframe',
            onCleanup   : function() {
                return window.location.reload();
            }
       });

Не могу точно сказать, но, возможно, причина в использовании "onCleanup" (на самом деле я не пробовал использовать onClosed).

Answer 5

Вам просто нужно написать две строки, чтобы закрыть fancybox и после закрытия перезагрузить родительскую страницу, на которой вы открыли свой fancybox.

Стоит заметить, что если вы попробуете это с window.opener, оно не будет работать, так как fancybox не будет рассматриваться как дочернее окно родителя, когда дело доходит до window.opener

Еще одна вещь - то, что window.opener не будет работать для Windows Phone, а также с IE, так как IE уже глуп.

<script type="text/javascript">
parent.$.fancybox.close();
         parent.location.reload(true); 
</script>

Answer 6

обновление ссылки:

jQuery(function($){ 
    $('#refresh').click(function ()
        {      
            parent.location.reload();
    });
});

<a href="#" id="refresh">refresh</a>

Вы можете указать:

setTimeout(function () {
            parent.location.reload(); 
        }, 1000);

или условие, например,

<script>
if(formSend == true){
setTimeout(function () {
                parent.location.reload(); 
            }, 1000);
}
</script>

Answer 7

Обходной путь, чтобы избежать появления предупреждения POSTDATA при закрытии iFrame

1) Пожалуйста, создайте форму:

<form name="RefreshForm" method="post" action="" >
<input name="Name1" value="Value1" type="hidden" />
<input name="DatafromPost1" value="ValuefromPOST1" type="hidden" />
<input name="DatafromPost2" value="ValuefromPOST2" type="hidden" />
</form>

2) добавьте следующие строки в конце вашей Fancy-Box:

Необычные версии 2.x.x

afterClose : function() { 
setTimeout('document.RefreshForm.submit()',1000); }

Fancy ver 1.3.x

     onClosed : function() { 
setTimeout('document.RefreshForm.submit()',1000); }

1000 = 1 секунда.

Answer 8

'onClosed': function() {
 parent.location.reload(true); 
;} // <----is it ok if you have an extra ';' here?

Answer 9

Обновите или перезагрузите при закрытии формы с помощью fancybox в Shopify

Я использовал это на Shopify, но это будет работать и на других также

  jQuery(".add-device").fancybox({
    maxWidth  : 970,
    maxHeight : 700,
    fitToView : false,
    width     : '90%',
    height    : '90%',
    autoSize  : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
    beforeClose: function() {
      device_has_subs = false;
      $("#mac_address").prop("readonly", false);
    },
    afterClose    : function() {
      window.location.reload(true);
        }
  });

здесь только после закрытия задачи мы можем также написать родителя вместо окна

afterClose    : function() {
  parent.location.reload(true);
    }

Если просто сбросить форму в shopify, то In shopify когда-нибудь $("form") [0] .reset () не работает, поэтому с помощью итерации мы можем очистить значение формы

  jQuery(".add-device").fancybox({
    maxWidth  : 970,
    maxHeight : 700,
    fitToView : false,
    width     : '90%',
    height    : '90%',
    autoSize  : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
    beforeClose: function() {
      device_has_subs = false;
      $("#mac_address").prop("readonly", false);

      var array_element = document.getElementById("form_id");
      if (array_element){

        for (i=0; i < array_element.length; i++){
            element = array_element[i].type.toLowerCase();
            switch(element){
              case "text":
                  array_element[i].value = "";
                  break;
              case "hidden":
                  array_element[i].value = "";
                  break;
              case "email":
                  array_element[i].value = "";
                  break;
              case "checkbox":
                  if(array_element[i].checked){
                    array_element[i].checked = false;
                  }
                  break;
              case "select-one":
                  array_element[i].selectedIndex = -1;
                  break;
              case "select-multi":
                  array_element[i].selectedIndex = -1;
                  break;
              default:
                  break;
          }

        }

      }

    },
  });

form_id - это идентификатор формы

Answer 10

'onClosed': function () {parent.location.reload (true); }