jQuery Fancy Box - 关闭 iframe 弹出窗口时如何刷新父页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3269899/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fancy Box - how to refresh parent page when close iframe popup?
提问by dave
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.
当我关闭 Fancy Box 弹出框时，我希望我的父页面刷新。我在弹出窗口中有一个登录页面，所以我需要刷新父页面以在 Fancy Box 关闭时显示新的登录状态。
I can get it to work without the iFrame code:
我可以让它在没有 iFrame 代码的情况下工作：
<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:
但我无法让它与 iFrame 代码一起工作：
<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 iframeto popup in Fancy Box, and still get the parent page to refresh when the box closes??
Thanks!
任何人都可以就如何iframe在 Fancy Box 中弹出一个解决方案提出建议，并且在框关闭时仍然让父页面刷新？谢谢！
回答by Kemal Can ?Z?EL?K
$(".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.jsfile and go line 1380it is look like this and add 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;
}
回答by adil
$(".fancybox").fancybox({
'width' : '75%',
'height' : '65%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe',
'hideOnOverlayClick': false,
'onClosed' : function() {
parent.location.reload(true);
}
});
回答by Vovkin
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).
我不能确切地说，但也许是使用“onCleanup”的原因（实际上我没有尝试使用 onClosed）。
回答by nikolaosinlight
Besides the obvious missing , which you say you have fixed IMO this is not a fancybox issue but rather a parent refresh issue.
除了明显的 missing ，你说你已经修复了 IMO 这不是一个花哨的问题，而是一个父刷新问题。
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:
这是在 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.
这基本上是说将父 href 设置为当前的任何值，这实际上会导致页面刷新。试试看，它应该工作得很好。
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.
可以与框架一起使用（当然来自父级）或不使用框架来简单地刷新网页。哈。
回答by trig_php
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.
你只需要写两行来关闭fancybox，关闭后重新加载你打开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
需要注意的一件事是，如果您尝试使用 window.opener 它不会工作，因为在 window.opener 时，fancybox 不会被视为父窗口的子窗口
One more thing is that window.opener is not going to work for windows phone and also with IE, as IE is already stupid.
还有一件事是 window.opener 不适用于 Windows Phone 和 IE，因为 IE 已经很愚蠢了。
<script type="text/javascript">
parent.$.fancybox.close();
parent.location.reload(true);
</script>
回答by n3ISe
'onClosed': function() {
parent.location.reload(true);
;} // <----is it ok if you have an extra ';' here?
回答by LLukaso
A work around to avoid having POSTDATA Warning when you close the iFrame
一种避免在关闭 iFrame 时出现 POSTDATA 警告的解决方法
1) Please Create form :
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) add this lines at the end of your Fancy-Box:
2) 在 Fancy-Box 的末尾添加以下行：
Fancy ver 2.x.x
花式 2.xx 版
afterClose : function() {
setTimeout('document.RefreshForm.submit()',1000); }
Fancy ver 1.3.x
花式 1.3.x 版
onClosed : function() {
setTimeout('document.RefreshForm.submit()',1000); }
1000 = 1 second.
1000 = 1 秒。
回答by websky
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>
回答by Greg
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.
当使用带有 'location.reload' 的示例时，您会看到一个浏览器弹出窗口，让您知道它需要重新加载页面。我触发了一个按钮单击以刷新页面并且没有警告弹出窗口。
$(".addDoc").colorbox({
iframe: true,
width: "550px",
height: "230px",
'onClosed': function() {
$("#btnContSave").click();
}
});
回答by Vinay Kumar
Refresh or reload on closing the form using fancybox in Shopify
在 Shopify 中使用fancybox 关闭表单时刷新或重新加载
I was using this on Shopify but this will work on other also
我在 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);
}
});
here only afterClose is playing the task we can also write parent instead of window
这里只有 afterClose 正在播放任务我们也可以写父而不是窗口
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
如果只是在 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 is the form id
form_id 是表单 ID
