fancybox safari issue when loading external page

Question

I'm having an issue with fancybox when I try and load an html page.

I have a link

<a href="testPage.html" id="chal">Load testPage.html in fancybox</a>

and then the js that binds it to fancybox

$('a#chal').fancybox({
    padding: 0,
    margin: 0,
    showCloseButton: true,
    scrolling: 'no',
    opacity: 0.5,
    centerOnScroll:true
});

In chrome, firefox, and IE the fancybox loads fine. But in Safari, the html loads without the accompanying css or js. If I add something like this, then it works:

 $('a#chal').click(function() {
    $("head").append($("<link rel='stylesheet' href='blah.css' media='screen' />"); 
    });

Then it works just fine but it seems like the solution above is not the way to go about it. Is there any other way to do this? Thanks.

score 1 · Answer 1 · edited May 23 '17 at 10:33

I found very limited info on this bug, so thanks for pointing out that Safari rips out js/css elements in fancybox popups. I tried your method and the createElement('script') method but I struggled to get your method working with js includes as it was doing funky things with my own script.

As a last resort I moved my custom jquery scripts that were previously in the head element of the popup to the body element (not good form I know... ;) and now all my form validation and ajax posts work in Chrome/Safari/FF/IE7/IE8.

HTH someone out there.

Cheers, Ben

fancybox safari issue when loading external page

1 Answers1