Fancybox.close（）在iframe上 [英] Fancybox.close() on an iframe
问题描述
我正在使用最新的fancybox（2.0.4），并为iframe创建了一个fancybox。内容显示正确。我添加一个关闭按钮到我的html，这是在iframe中被滥用。我希望关闭按钮具有与点击fancybox右上角的x相同的结果。我熟悉 FancyBox iframe返回父项$为未定义（使用WordPress） ，而我的父是一个没有任何内容的DOM对象。也试过
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 parent is a DOM object with nothing in it. also tried
window.parent.jQuery.fancybox.close();
window.parent.jQuery.fn.fancybox.close();
parent.jQuery.fn.fancybox.close();
parent.jQuery.fancybox.close();
任何帮助？
更新： / p>
a.js（链接到a.html）
UPDATE:
$(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
a.html
<a class="fancybox fancybox.iframe" id="newLink" href="new.html">link</a>
我如何在 new.html 关闭fancybox iframe窗口
how can i have a button within new.html that closes the fancybox iframe window
更新：一个完整的html文件
UPDATE: a complete html files
<!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>
推荐答案
您的手动关闭按钮应如下所示：
Your manual close button should look like:
<a href="javascript:parent.jQuery.fancybox.close();"><img src="myCloseButton.png" alt="close fancybox" /></a>
更新：您应该使用 onsubmit 在< form> 标签，而不是在按钮图像，所以在你的新.html设置像
UPDATE: you should use the onsubmit on the <form> tag, not on the button image so in your "new.html" set something like
<form id="login_form" action="process.php" onsubmit="javascript:parent.jQuery.fancybox.close();">
UPDATE #2: see working demo page
更新＃3 ：我已经决定删除我对这个答案的所有补充，因为讨论太长了，我们没有任何地方。如果这可以帮助别人，我可以使用代码和一个工作示范的链接。
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.
这篇关于Fancybox.close（）在iframe上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
