Fancybox: The requested content cannot be loaded. Please try again later

1
votes

This particular topic has some answers on SO, but none of them solves my problem. I have no idea where to look here, although I suspect it's something very simple.

  • When I try to open a url in a Fancybox manually (i.e. by 'physically' clicking a link) it works.
  • If I however try to open it on page load automatically (i.e. by faking clicking a link), it doesn't work at all and gives me the error I mention in my title.

The HTML is simple:

<a href="http://www.mydomain.nl/url/to/whatever" class="fancybox hidden_link">test</a>

The Javascript I'm using to automatically click it, is pretty straightforward too:

$(document).ready(function() {              
    $(".hidden_link").fancybox().trigger("click");
});

The event goes off (a Fancybox opens), but it shows nothing more than the 'content cannot be loaded' message. I see my own page in the Fancybox when I click the link manually.

What am I missing here?

4
javascriptjqueryfancybox
Following the error message's advice, I tried later, but even that didn't help. - Sherlock
I may just be ignorant here, but why the .fancybox() call on the link if you're trying to mimic the effect of manually clicking the link? Can't you just use .click() directly on the object returned by the jQuery selector? - Thor84no
I thought that, but removing it stops the Fancybox from opening at all. - Sherlock
Have you checked out the examples here? In particular point 12 (Launch fancyBox on page load) has an example that seems related to what you're doing while being slightly different from the code you've posted. - Thor84no

4 Answers

4
votes

Having this link :

<a href="http://www.mydomain.nl/url/to/whatever" class="fancybox hidden_link">test</a>

... this script :

$(document).ready(function() {
    $(".fancybox").fancybox({
        type: "iframe",
        width : 380, // or whatever
        height: 280
    }).trigger("click");
});​

... should do the job for both, manually and programmatically.

See JSFIDDLE

Notice that I used type: "iframe" since the content is an external page. The same origin policy should be considered in any case.

1
votes

Because there is something like same origin policy.

You get from google response: X-Frame-Options SAMEORIGIN

If you link to subpage within your domain it should work.

1
votes

Here's a solution I gave the author a while.

$(document).ready(function() {
    $.fancybox({
        content: $("#popup"),
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none',
        helpers   : {
            overlay : {
                closeClick: false,
            }
        }
    });
});

Link: http://jsfiddle.net/YkH5G/1/

By author plugin: https://github.com/fancyapps/fancyBox/issues/410

1
votes

That's one of the facets of same-origin policy. The exact behavior differs from browser to browser. See http://code.google.com/p/browsersec/wiki/Part2#Navigation_and_content_inclusion_across_domains

Here's the summary per browser version.

There's clearly a security concern here, because clicking links with JavaScript can cause actions on your behalf. That may be destructive on sites where GET requests cause state change, because a header (like a cookie) authenticating you will be sent with that GET request as well.