Can an iframe pop up a Lightbox-style box?

问题:

This question isn't about popping up an iframe inside a Lightbox; rather, it's about an iframe on a page that can launch its own Lightbox-style box in the page that contains that iframe. I'm thinking this can't be possible, because the iframe contains the contents of the other URL and whatever Lightbox that URL launches has to fit within the iframe. Thanks.

回答1:

It is not possible for the <iframe> to interact with its parent frame if the two frames are on different domains.

回答2:

If both sites belong to the same domain you can add the JS of the lightbox to the main frame and call the function inside the iframe using ´parent.function´

回答3:

Try looking at fancybox. I know that supports iframes, and I always use it over Lightbox, much more customisable. I am pretty sure it can deal with nested iframes, however I could be wrong. Worth a try nether the less.

Can display images, HTML elements, SWF movies, Iframes and also Ajax requests

There are examples on the bottom of the page: http://fancybox.net/

回答4:

I don't know if it's around anywhere online, but i saw Facebook give a presentation about injecting an iframe into other sites to circumvent such problems with cross-site issues. Worth a look.

回答5:

It is possible but only if you can have some controll of the remote server. There are various ways to do that but to gice you a quick start you can use this simple frame postman.

When you recieve a message from the frame (probably with image URL) you simply open a lightbox dialog in your main document.

回答6:

A simple workaround that worked for me was to initialize lightbox in the parent window, then to create a blank placeholder link, and function that changes the href and clicks the placeholder link:

In the header or footer of the parent window:

<script type="text/javascript">
  $(function () {
    $('.lightbox').lightBox();
  });

  function image_preview(url)
  {
     $('#fakebox').attr('href',url);
     $('#fakebox').trigger('click')   
  }
</script>

Somewhere in the body of the parent window:

<a href="" class="lightbox" id="fakebox"></a>

So in the iframe I call the parent function to launch the fancybox:

<a href="JavaScript:void(0);" class="btn btn-tertiary btn-small" onClick="parent.image_preview('http://static8.depositphotos.com/1007989/1011/i/950/depositphotos_10118078-Grinning-Smiley.jpg')">Preview</a>

回答7:

We are facing the same issue, i guess one possible solution is window.open from an iframe.