jquery (fancyzoom) 打开父框架项答案

【问题标题】：jquery (fancyzoom) open parent frame itemjquery (fancyzoom) 打开父框架项
【发布时间】：2009-11-12 18:55:52
【问题描述】：

我正在尝试做一些我什至不确定是否可行的事情。

使用页面上 iframe 中的链接，我想在父级上打开一个 fancyzoom 框（这样框不会被框架边缘遮挡）。我假设 fancyzoom 框内容 div 必须存在于父级中，但我无法让它在那里打开。我已经将fancyzoom代码包含在仅限父母，仅限孩子，父母和孩子身上，但无济于事。我尝试通过在代码之前和代码中添加 .parent 来从孩子调用父框架，但无济于事。

有什么想法吗？

这是父页面的（当前损坏的）状态：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>iframe zoom test</title>
<link href="nstyle.css" rel="stylesheet" type="text/css" />

<!--
  jQuery library
-->
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

<!--
  fancyzoom 
-->
<script type="text/javascript" src="fancyzoom.min.js"></script>
  <script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
   $('#medium_box_link').fancyZoom({width:400, height:300});
  });
 </script>
 </head>
<body> 

<a href="#medium_box" id="medium_box_link">Alaska</a> 
<div id="medium_box">
 <h2>All about Alaska</h2>
 <p><strong>Here is some info about my time in Alaska</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam  congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus.</p>
</div>
<iframe src="iframetest.html" width="85" height="700" scrolling="no" FRAMEBORDER="0" name="frame" />

</body>
</html>

这是子框架：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

 <title>iframe zoom test</title>
 <link href="nstyle.css" rel="stylesheet" type="text/css" />
<!--
  jQuery library
-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<!--
  fancyzoom 
-->

<script type="text/javascript" src="fancyzoom.min.js"></script>
  <script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
   $('#medium_box_link').fancyZoom({width:400, height:300});
  });
</script>
</head><body><a href="#medium_box" id="medium_box_link"'>Alaska</a>
<div id="medium_box">
 <h2>All about Alaska</h2>
 <p><strong>Here is some info about my time in Alaska</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam  congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus.</p>
</div>
</body>
</html>

我试过修改

$('#medium_box_link').fancyZoom({width:400, height:300});

成为

window.parent$('#medium_box_link').fancyZoom({width:400, height:300});

甚至

$('#medium_box_link',window.parent).fancyZoom({width:400, height:300});

但无济于事。我正在尝试做的事情是否可能？

提前感谢任何帮助或指点！

【问题讨论】：

标签： javascript jquery iframe

【解决方案1】：

在父窗口中调用函数的基本语法是window.parent.function。

但是，我不确定您调用的父函数是在其原始上下文中还是在子框架窗口的上下文中进行评估的。过去我在跨帧调用 $() 函数时遇到过问题。

如果您仍然遇到问题，请尝试在父窗口中创建一个包装函数，如下所示：

function initZoom() {
    $('#medium_box_link').fancyZoom({width:400, height:300});
}

然后从子框架调用该包装器：

window.parent.initZoom();

这可能会迫使它。否则，您可以尝试以下方法：

$(window.parent).children('#medium_box_link').fancyZoom({width:400, height:300});

但我有一种感觉可能还是会崩溃。

【讨论】：

感谢您的回复。可悲的是，我试过这个，但它不起作用。还有其他想法吗？

【解决方案2】：

似乎没有人能够完成这项工作，所以我转向使用 floatbox (here) 的另一种解决方案。虽然它要花 20 美元，但它完全可以满足我的需要，而且麻烦最少。缩放适用于 iframe 内部或外部的任何元素，有很多选项，而且流畅。

【讨论】：