Fancybox iframe is blank

Question

so i have downloaded the fancybox zip and added it to my site. when i go to the demos area, everything is working fine with the exception of the iframe. i havent edited the code in anyway. it works perfectly on their site, so im not sure why it would be any different on mine. i have searched through this site and others and have came up with nothing. again i have not edited any of the code, i simply unzipped it and pushed it to my server. any ideas? View Here

Answer 1

This is not a fancybox issue.

The demo file included in the fancybox download, targets the jQuery site for the iframe sample .... but today most mayor sites like google, yahoo, and others etc. (and now jQuery too) don't allow themselves to be contained within iframes. I guess the demo file is outdated.

If you can place any web site within a regular html iframe (like your own or any other you create for instance), then you can open it with fancybox too. Check this demo and see it for yourself ... notice what iframes are "blank".

You can also check this thread for reference.

Answer 2

Very simply, the Iframe doesn't have a valid source.

Iframe has an attribute called src (source) which is the address of the site you want to display in the inline frame; yours in that demo is linking to http://jquery.com I don't know how Fancy box works but I daresay that isn't what you wanted!

<iframe class="fancybox-iframe" name="fancybox-frame1329790605687" frameborder="0" hspace="0" scrolling="auto" src="http://jquery.com"></iframe>

The src attribute on the main fancybox demo site links to a local page:

<iframe class="fancybox-iframe" name="fancybox-frame1329790726739" frameborder="0" hspace="0" scrolling="auto" src="/demo/iframe.html"></iframe>

Which you can see here outside of the iframe:

http://fancyapps.com/demo/iframe.html

Answer 3

You need to use your browser's error log / console when debugging.

I get

Refused to display document because display forbidden by X-Frame-Options.

when clicking the Iframe link.

jquery.com is obviously implementing the X-Frame-Options response header to prevent you loading their site in an iFrame.

Update

Here's an extract of the headers returned from jquery.com

$ telnet jquery.com 80
Trying 70.32.73.125...
Connected to jquery.com.
Escape character is '^]'.
GET / HTTP/1.1
Host: jquery.com

HTTP/1.1 200 OK
X-Frame-Options: SAMEORIGIN