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

Я хочу, чтобы моя родительская страница обновилась, когда я закрыл всплывающий кадр 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, и все-таки вернуть родительскую страницу, когда окно закрывается? Спасибо!

Ответ 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;
}

Ответ 2

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

Ответ 3

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

$("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).

Ответ 4

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

Ответ 5

Работайте, чтобы избежать предупреждения 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:

Причудливый ver 2.x.x

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

Причудливая версия 1.3.x

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

1000 = 1 секунда.

Ответ 6

ссылка refresh:

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>

Ответ 7

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

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

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

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

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

Фактически строка:

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

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

Ответ 8

При использовании примеров с 'location.reload' вы получаете всплывающее окно браузера, которое позволяет вам знать, что ему нужно перезагрузить страницу. Я нажал кнопку, чтобы обновить страницу и всплывающее окно с предупреждением.

$(".addDoc").colorbox({
    iframe: true, 
    width: "550px", 
    height: "230px",
    'onClosed': function() {
        $("#btnContSave").click();
    }
});

Ответ 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);
        }
  });

здесь только после того, как Close выполняет задачу мы также можем записать родительский элемент вместо окна

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

Если только reset форму в shopify, тогда, In shopify sometime $( "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 - это форма id

Ответ 10

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

Ответ 11

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

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

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

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