fancybox iframe content not showing through a jquery function

Question

Here is my code inside of a jquery function:

$("form").submit(function() {


    if(form.First_Name.value == ""){
        alert("Please fill in your First Name.");
        form.First_Name.focus();
        return false;
    }
    if(form.Last_Name.value == ""){
        alert("Please fill in your Last Name.");
        form.Last_Name.focus();
        return false;
    }
    if(form.Customer_eMail952.value == ""){
        alert("Please fill in your Email.");
        form.Customer_eMail952.focus();
        return false;
    }else{
        if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(form.Customer_eMail952.value)) {
            alert("Invalid Email");
            form.Customer_eMail952.focus();
            return false;
        }
    }
    var submittedURL = 'http://www.google.com';
    $.fancybox.open({'href': submittedURL, 'type': 'iframe'});
});

The function will run without any errors, but when the iframe is shown it doesn't display anything inside of it. Using FireBug It will show the correct href:

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

I am using fancybox 2.0, and fancybox is already open while this function is being called. It is being called after a form validation.

Why doesn't the Iframe load? The What am I doing wrong?

Try some other page and not Google. I belive that I have tested the same code and Google dont like that you embead it. Maybe I'm wrong, give it a try — Simon Edström, Mar 08 '12 at 18:52
I have tried different URLs, it doesn't seem to matter what I use, it won't load the iframe content. — Daniel, Mar 08 '12 at 18:59
fancybox 2.0, Also I am calling this function while fancybox is already open (within a inline html box). — Daniel, Mar 08 '12 at 19:10
Fancyapps.com is down for me, however I found a demo here: http://webdesignandsuch.com/posts/fancybox-download/fancyBox2/ if I click an image and later execute your code in the console its just works fine. Do you have any other diffrent settings? — Simon Edström, Mar 08 '12 at 19:22
I have gotten the code to work (outside of the form validation script), but it won't work properly in the form validation script. — Daniel, Mar 08 '12 at 19:45
because you have `return false;` after each `if` so it never gets to the function which fires fancybox ... I guess your fancybox function should be inside a last `else` condition to be executed after the validation. — JFK, Mar 08 '12 at 19:50
When the form is valid, it does execute the fancybox code. It doesn't however show the iframe, it will show a blank fancybox. When looking at the blank fancybox iframe in FireBug, it shows that it is an iframe with the correct URL, but it doesn't load the contents of the iframe for some reason. — Daniel, Mar 08 '12 at 19:55
your function works but not with google (did you see my answer?), try another target like `var submittedURL = 'http://www.fancybox.net';` — JFK, Mar 08 '12 at 20:09
I just tried 'http://www.fancybox.net' Like I said it doesn't matter what URL I use, it won't display. — Daniel, Mar 08 '12 at 20:19
I don't know what you may be doing wrong but definitively you can open some other web pages (see my answer for restrictions) in fancybox via iframe, but it's hard to guess without a link. See demo here http://picssel.com/playground/jquery/issueIframeviaFunction_08mar12.html — JFK, Mar 08 '12 at 20:52
I can get the iframe to load on a onclick event, but it just won't load when the form validates. It shows a blank iframe with the correct URL. — Daniel, Mar 08 '12 at 21:09
I found a solution, I couldn't get fancybox to work so I jquery'd it. `$(".fancybox-inner").empty();` `$(".fancybox-inner").append('');` `$.fancybox.update();` I realize this is a lame hack, but it works. — Daniel, Mar 08 '12 at 21:27

score -1 · Accepted Answer · answered Mar 09 '12 at 16:58

I found a solution, I couldn't get fancybox to work so I jquery'd it.

I replaced this code:

var submittedURL = 'http://www.google.com';
$.fancybox.open({'href': submittedURL, 'type': 'iframe'});

with this code:

$(".fancybox-inner").empty();
$(".fancybox-inner").append('<iframe src="'+submittedURL+'" class="fancybox-iframe" scrolling="auto" frameborder="0" hspace="0" />');
$.fancybox.update();

I realize this is a lame hack, but it works.

score -2 · Answer 2 · edited May 23 '17 at 12:21

-2

Google and other well known webpages (facebook, yahoo, etc.) are mostly using a X-Frame response header to avoid clickjacking attacks (that might happen when opened within iframes). Google added that option also due to changes in their adSense program policies .

Check the following links for more information:

https://stackoverflow.com/a/8808761/1055987

https://developer.mozilla.org/en/The_X-FRAME-OPTIONS_response_header

You could open other pages of your own domain though.

edited May 23 '17 at 12:21

Community

1
1

answered Mar 08 '12 at 19:29

JFK

40,963
31
133
306

for the people who downvoted this: please prove me wrong and let a comment. – JFK Mar 18 '12 at 03:45

fancybox iframe content not showing through a jquery function

2 Answers2