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>
