gpt4 book ai didi

jquery - 在 iframe 父级中显示 jquery PrettyPhoto 灯箱

转载 作者:行者123 更新时间:2023-12-01 07:02:41 25 4
gpt4 key购买 nike

我正在使用 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

编辑

好的,唯一可行的方法是:

  1. 从实际页面(inner.html,iframe 中包含的代码)中删除以下代码:

    <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
    });

  2. 现在在您的 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>
  3. 另外添加以下 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com