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 и при этом обновить родительскую страницу при закрытии окна? Спасибо!


jquery fancybox
person dave    schedule 17.07.2010    source источник
comment
Вам просто не хватает запятой после «iframe»?   -  person user11977    schedule 17.07.2010
comment
Спасибо, смерриман! да. Мне не хватило запятой. Хороший улов. Я исправил это, но я все еще не могу перезагрузить страницу при закрытии. Есть еще идеи?   -  person dave    schedule 17.07.2010

Ответы (9)


arrow_upward
29
arrow_downward 

$(".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;
}
person Kemal Can ÖZÇELİK    schedule 17.07.2012
comment
при таком подходе вы меняете все поведение Fancybox, что может быть неприемлемо для большинства случаев. - person Raptor; 10.10.2012

arrow_upward
2
arrow_downward

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

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

person Vovkin    schedule 21.07.2011

arrow_upward
2
arrow_downward

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

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

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

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

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

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

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

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

person nikolaosinlight    schedule 22.08.2015

arrow_upward
1
arrow_downward

Обходной путь, позволяющий избежать предупреждения 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); }

Модная версия 1.3.x

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

1000 = 1 секунда.

person LLukaso    schedule 19.02.2014

arrow_upward
1
arrow_downward

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

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>
person websky    schedule 24.11.2014

arrow_upward
1
arrow_downward

Вам просто нужно написать две строки, чтобы закрыть 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>
person trig_php    schedule 27.05.2015

arrow_upward
1
arrow_downward

Ну, я знаю, что это очень старый пост, но вот новый ответ, который, я надеюсь, кому-то поможет. Я использую fancybox на странице с запросами моего веб-сайта, чтобы всплывать в лайтбоксе для чтения/удаления. Когда я удаляю запрос в лайтбоксе, я хотел, чтобы родитель обновлялся, чтобы показать текущий список запросов за вычетом того, который я только что удалил. Комментарий, за который проголосовали, мне не помог (поскольку он, вероятно, ссылается на более старую версию файла JS).

В строке 105 jquery.fancybox.js (v3.5.7) измените:

afterClose: n.noop,

to

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

Это раздражало меня в течение нескольких дней, но теперь это работает, не беспокойтесь.

person B. Waikel    schedule 15.07.2020

arrow_upward
0
arrow_downward

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

$(".addDoc").colorbox({
    iframe: true, 
    width: "550px", 
    height: "230px",
    'onClosed': function() {
        $("#btnContSave").click();
    }
});
person Greg    schedule 16.03.2012
comment
OP использует fancybox... не colorbox, поэтому параметры в вашем примере не будут работать с fancybox - person JFK; 17.03.2012
comment
вы когда-нибудь пробовали fancybox? ;) - person JFK; 19.03.2012
comment
@JFK ... да, я сделал, и работает как шарм :-) Событие кнопки может быть запущено практически на любом из этих ящиков и открывает множество возможностей. Позволяет мгновенно обновить страницу или щелкнуть. - person Greg; 21.03.2012

arrow_upward
0
arrow_downward

Обновить или перезагрузить форму при закрытии формы с помощью 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 играет задачу, мы также можем написать parent вместо окна

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

Если просто сбросить форму в shopify, тогда в 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 это форма id

person Vinay Kumar    schedule 31.01.2018