我正在使用 jquery Prettyphoto 2.5.3，我想知道当选择 iframe 内的图像链接时如何让灯箱显示在 iframe 的父窗口中？
这是我的代码:
iframe 中的页面:
<html>
<head>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen"/>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
</head>
<body>
<a href="animage.jpg" rel="prettyPhoto">
<img src="animage.jpg" height="200" width="200"/>
</a>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
</body>
当我单独加载此页面时，灯箱工作正常。
iframe 代码:
<html>
<head>
</head>
<body>
<iframe src="inner.html"/>
</body>
</html>
但是，当我加载带有 iframe 的页面并单击 iframe 中页面中的图像链接时，我希望灯箱显示在父窗口中而不是 iframe 中。
最佳答案
试试这个选择器:$("#myid", top.document)
top.document 告诉选择器以 myid 元素为目标 存在于最顶层的文档(您的父页面)中。为了这个 要工作，必须将 jQuery 加载到通过以下方式查看的文件中: iframe。
来源:http://groups.google.com/group/jquery-en/browse_thread/thread/5997ef4a60a123af?pli=1
编辑
好的，唯一可行的方法是:
从实际页面(inner.html，iframe 中包含的代码)中删除以下代码:
<script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto(); });现在在您的 iframe 页面中添加:
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen"/> <script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>另外添加以下 JS 代码:
$(function() { $("iframe").contents().find("a[rel^='prettyPhoto']").click(function() { $(this).prettyPhoto(); return false; } ); });
这应该可以解决问题，但它只适用于 iframe 页面，而不是直接在真实页面中工作。
关于jquery - 在 iframe 父级中显示 jquery PrettyPhoto 灯箱，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1483227/