jQuery iframe 上的 Fancybox.close()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9117975/
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
Fancybox.close() on an iframe
提问by Mr.
i am using the latest fancybox (2.0.4) and i created a fancybox for an iframe. the content is displayed correctly. i add a "close" button to my html which is displyed within the iframe. i wish that the close button will have the same result as clicking the "x" on the right top corner of the fancybox. i am familiar with FancyBox iframe returns parent.$ as undefined (using WordPress), and my parentis a DOM object with nothing in it. also tried
我正在使用最新的fancybox (2.0.4) 并为iframe 创建了一个fancybox。内容显示正确。我在我的 html 中添加了一个“关闭”按钮，该按钮在 iframe 中显示。我希望关闭按钮与单击fancybox 右上角的“x”具有相同的结果。我熟悉FancyBox iframe 将 parent.$ 返回为 undefined (using WordPress)，而 myparent是一个没有任何内容的 DOM 对象。也试过
window.parent.jQuery.fancybox.close();
window.parent.jQuery.fn.fancybox.close();
parent.jQuery.fn.fancybox.close();
parent.jQuery.fancybox.close();
any help?
有什么帮助吗？
UPDATE:
更新：
a.js (linked to the a.html)
a.js（链接到a.html）
$(document).ready(function() {
$(".fancybox").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
type : 'iframe',
openEffect : 'none',
closeEffect : 'none',
afterClose : function() {
window.location.reload();
}
});
});
a.html
一个.html
<a class="fancybox fancybox.iframe" id="newLink" href="new.html">link</a>
how can i have a button within new.htmlthat closes the fancybox iframe window
我怎么能有一个按钮new.html来关闭fancybox iframe窗口
UPDATE: a complete html files
更新：一个完整的 html 文件
a.html
一个.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="fancybox/jquery.fancybox.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/jquery.fancybox.pack.js?v=2.0.4"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
type : 'iframe',
openEffect : 'none',
closeEffect : 'none',
afterClose : function() {
window.location.reload();
}
});
});
</script>
</head>
<body>
<a class="fancybox fancybox.iframe" id="newLink" href="b.html">link</a>
</body>
</html>
b.html
b.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="fancybox/jquery.fancybox.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/jquery.fancybox.pack.js?v=2.0.4"></script>
</head>
<body>
<input type="submit" value="Cancel" id="cancelBtn" onclick="parent.jQuery.fancybox.close()"/>
</body>
</html>
回答by JFK
Your manual close button should look like:
您的手动关闭按钮应如下所示：
<a href="javascript:parent.jQuery.fancybox.close();"><img src="myCloseButton.png" alt="close fancybox" /></a>
UPDATE: you should use the onsubmiton the <form>tag, not on the buttonimage so in your "new.html" set something like
更新：你应该onsubmit在<form>标签上使用，而不是在button图像上，所以在你的“new.html”中设置类似
<form id="login_form" action="process.php" onsubmit="javascript:parent.jQuery.fancybox.close();">
UPDATE #2: see working demo page
更新 #2：查看工作演示页面
UPDATE #3: I have decided to remove all my additional comments to this answer since the discussion became too long and took us nowhere. I let the code and a link to a working demonstration if this can help somebody else though.
更新 #3：我决定删除我对这个答案的所有附加评论，因为讨论时间太长了，我们无处可去。如果这可以帮助其他人，我让代码和工作演示的链接。
回答by Aommy Indy
try{
parent.jQuery.fancybox.close();
}catch(err){
parent.$('#fancybox-overlay').hide();
parent.$('#fancybox-wrap').hide();
}
!!!Not Support onClose!!!
！！！不支持关闭！！！
回答by Nick Constantine
Try this in your Javascript:
在你的 Javascript 中试试这个：
$.fancybox.close();
$.fancybox.close();
