All geek questions in one place

Fancybox iframe is empty

so I downloaded fancybox zip and added it to my website. when i go to the demo area everything works fine except for the iframe. I did not edit the code at all. it works great on its website, so I'm not sure why it will be any different. I looked at this site and others, and came up with nothing. again I didn’t edit any of the code, I just unzipped it and clicked on my server. any ideas? View here

0
source share
3 answers

This is not a problem with fancybox.

The demo file included in the fancybox download targets the jQuery site for an iframe sample .... but today most of the mayor's sites like google, yahoo, etc. (and now jQuery too) do not allow them to be contained within an iframe. I think the demo file is out of date.

If you can put any website in a regular html iframe (for example, your own or any other that you create, for example), you can also open it with fancybox. Check out this demo and watch it yourself ... notice which iframes are "empty".

You can also check this thread for reference.

+4
source

When debugging, you must use the browser error log / console.

I get

Refuses to display the document, because display is prohibited using X-Frame-Options.

when you click the Iframe link.

jquery.com obviously implements the X-Frame-Options response header so that you don't load your site into iFrame.

Update

Here the excerpt from the headers came back 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
+2
source

Very simple, Iframe does not have a valid source.

Iframe has the src (source) attribute, which is the address of the site that you want to display in the inline frame; yours in this demo is linking to http://jquery.com I don’t know how the Fancy box works, but I suppose this is not 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 fancybox main 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>

What you can see here outside the iframe:

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

-1
source

Source: https://habr.com/ru/post/1442761/

More articles:


All Articles