jquery (fancyzoom) open parent frame item_问答_开发者

I am giving myself fits trying to do something which I am not even sure is possible.

using a link in an iframe on a page, I want to open a fancyzoom box on the parent (so that the box isn't obscured by the frame edges). I assume that the fancyzoom box content div must live in the parent, but I am unable to get it to open there. I have included the fancyzoom code on the parent only, child only, parent and child, to no avail. I have tried calling the parent frame from the child by adding .parent before and in the code, to no avail.

Any ideas?

Here is the (current broken) state of the parent page:

<!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>

and here is the child frame:

<!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开发者_JS百科({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>

I have tried modifying

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

to be

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

or even

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

but to no avail. Is what I am trying to do even possible?

Thanks in advance for any help or pointers!

The basic syntax for calling a function in the parent window is window.parent.function.

However, I'm not sure whether the parent function you call gets evaluated in it's original context, or in the context of the child frame window. I've had problems in the past with calling $() functions across frames.

If you're having problems still, try creating a wrapper function in the parent window like so:

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

And then calling that wrapper from the child frame:

window.parent.initZoom();

That may force it. Otherwise, you could try something like the following:

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

But I have a feeling that may still conk out.

No one seemed to be able to make this work, so I moved to another solution using floatbox (here). Although it cost 20 bucks, it does exactly what I need with a minimum of hassle. Zoom works from any element inside or outside an iframe, with lots of options, and smoothly.