Question

我正在尝试做一些我甚至不确定的事情。

使用页面上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});

但无济于事。我想做什么甚至可能？

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

Answer 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});

但我有一种感觉可能仍然可以解决。

Answer 2

似乎没有人能够做到这一点，所以我使用floatbox（here）转移到另一个解决方案。虽然它花了20美元，但它完全符合我的需要，而且麻烦最少。缩放适用于iframe内部或外部的任何元素，具有许多选项，并且流畅。

jquery（fancyzoom）打开父框架项

2 个答案: