问题
I want my parent page to refresh when I close a Fancy Box popup frame. I have a login page inside the popup, so I need the parent page to refresh to show the new login state when the Fancy Box closes.
I can get it to work without the iFrame code:
<script type="text/javascript">
$(document).ready(function() {
$("a.iframeFancybox1").fancybox({
'width': 800,
'height': 450,
'onClosed': function() {
parent.location.reload(true);
;}
});
});
</script>
But I can't get it to work with the iFrame code:
<script type="text/javascript">
$(document).ready(function() {
$('a.iframeFancybox1').fancybox({
'width': 800,
'height': 450,
'type' : 'iframe'
'onClosed': function() {
parent.location.reload(true);
;}
});
});
</script>
The problem is to do with this line:
'type' : 'iframe'
As soon as I add that line, the popup stops working.
Can anyone suggest a solution as to how I can get an iframe to popup in Fancy Box, and still get the parent page to refresh when the box closes?
Thanks!
回答1:
$(".fancybox").fancybox({
type: 'iframe',
afterClose: function () { // USE THIS IT IS YOUR ANSWER THE KEY WORD IS "afterClose"
parent.location.reload(true);
}
});
Alternatively:
Go to your jquery.fancybox.js file and go line 1380 it is look like this and add 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:
For me next code works ok:
$("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();
}
});
I can't say exactly, but maybe the reason in using "onCleanup" (actually I didn't try use onClosed).
回答4:
Besides the obvious missing , which you say you have fixed IMO this is not a fancybox issue but rather a parent refresh issue.
I have found it to be a challenge to get a parent of a frame to reload as there are multiple ways to "theoretically" achieve this but "most" simply do NOT work in practice and worse yet there really doesn't appear to be any error raised by the web browsers I tested with.
Here is code that works well for me on Chrome, FF, IE:
afterClose: function(){
parent.location.href = parent.location.href;
},
This basically says set the parent href to whatever it is currently which in effect results in a page refresh. Try it out and it should work well.
In fact the line:
parent.location.href = parent.location.href;
can be used with frames (from the parent of course) or without frames to simply refresh a web page. HTH.
回答5:
'onClosed': function() {
parent.location.reload(true);
;} // <----is it ok if you have an extra ';' here?
回答6:
A work around to avoid having POSTDATA Warning when you close the iFrame
1) Please Create form :
<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) add this lines at the end of your Fancy-Box:
Fancy ver 2.x.x
afterClose : function() {
setTimeout('document.RefreshForm.submit()',1000); }
Fancy ver 1.3.x
onClosed : function() {
setTimeout('document.RefreshForm.submit()',1000); }
1000 = 1 second.
回答7:
link refresh:
jQuery(function($){
$('#refresh').click(function ()
{
parent.location.reload();
});
});
<a href="#" id="refresh">refresh</a>
you can give:
setTimeout(function () {
parent.location.reload();
}, 1000);
or condition, for example,
<script>
if(formSend == true){
setTimeout(function () {
parent.location.reload();
}, 1000);
}
</script>
回答8:
You just need to write two lines to close the fancybox and after close to reload the parent page on which you have opened your fancybox.
One thing to be notices is that if you will try it with window.opener it not going to work as fancybox is not treated as a child window of the parent when it comes to window.opener
One more thing is that window.opener is not going to work for windows phone and also with IE, as IE is already stupid.
<script type="text/javascript">
parent.$.fancybox.close();
parent.location.reload(true);
</script>
回答9:
When using the examples with 'location.reload' you get a browser pop that lets you know it needs to reload the page. I fired a button click to refresh the page and no warning popup.
$(".addDoc").colorbox({
iframe: true,
width: "550px",
height: "230px",
'onClosed': function() {
$("#btnContSave").click();
}
});
回答10:
Refresh or reload on closing the form using fancybox in Shopify
I was using this on Shopify but this will work on other also
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);
}
});
here only afterClose is playing the task we can also write parent instead of window
afterClose : function() {
parent.location.reload(true);
}
If just reset the form in shopify then, In shopify sometime $("form")[0].reset() not works so using iteration we can empty the form value
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 is the form id
回答11:
'onClosed' : function() { parent.location.reload(true); }
来源：https://stackoverflow.com/questions/3269899/fancy-box-how-to-refresh-parent-page-when-close-iframe-popup