问题
I have created a facebook fan page here:
http://www.facebook.com/apps/application.php?id=120196931351044&v=app_120196931351044
It incorporates iframes to call certain pages/image galleries which use jquery. Everything works fine in all browsers except for Chrome. Nothing shows up in Chrome from the iframes, just empty white background.
I tried using load event instead of ready handler but still no luck.
Has anyone witnessed the similar issue in chrome?
Your help will be greatly appreciated.
The big images in the header come through iframe,a page incorporating jquery.
Update:
As shown in the comments below, it doesn't seem to work even in Safari as well.
Update 2
The same code seems to work in chrome when run outside of the iframe, here is the link to working page:
http://jsbin.com/esame4/4
Update 3:
It seems that this problem persists in chrome when using iframes as can be seen here:
http://www.google.am/support/forum/p/Chrome/thread?tid=2c81c3e3fd99b388&hl=en
http://forums.sharethis.com/topic.php?id=2742
回答1:
The solution is actually simple. To get your iframe stuff display well in Chrome when you see a Facebook page/app, you have to call content or properties from an secured server.
You MUST ensure that all your required files and folders like the CSS, JS and image files are inside a secured folder.
For this you need a SSL certificate for your domain.
Alter your htaccess file and mod rewrite condition to force SSL for all or specific folders especially when you are using variables to call the files. If you're using absolute URL change them to https.
Hope this helps!
回答2:
A few suggestions, mostly related to your Javascript setup on the gallery.php page:
My first instinct is to say it's a bug (or even an intended response) in the way Chrome/WebKit handles cross-site scripting and other similar potential security holes. I know some security holes involve running script from inside an iframe (as this former Chrome bug refers to).
Perhaps it's something to do with you referencing your jquery.min.js from ajax.googleapis.com instead of hosting it on the same domain as your gallery.php page. Try putting a copy of jquery.min.js on your server and linking to that and see if it helps.
Also, try moving your the jQuery library <link> tag to inside your <head> tag, as that's a more appropriate place for it.
You might also try using the jQuery Innerfade library to run your rotating banner. It would clean up your script and, who knows, perhaps convince the browser that you're not trying to exploit a hole in security.
If you're unable to switch to using Innerfade, at least change your JavaScript variables to not be named with a $ (e.g. change your "$curbox" variable to "curbox"). It might further clear up any confusion the browser may be having with your Javascript. At the very least, it's good practice, especially when using jQuery.
回答3:
If it's a problem with document.ready not getting called in the iframe because the page has already been loaded at that point, is it possible to instead put the javascript that you want to load at the bottom of the new page instead of in document.ready, so that it'll load up once everything else has been loaded? I've done something similar on some pages, like put a bit of javascript at the top of the page to show a loading image, and another chunk at the bottom to hide it, etc...
<html>
<head><script>function pop(){alert("Page Loaded");}</script></head>
<body>Lorum ipsum...</body>
<script>pop();</script>
</html>
回答4:
Hey sAc, I've tryed it on Chrome 5.0.375.86 and it worked. Since safari and chrome uses the same web engine (webkit) it could inherit the same problem. Since it's a javascript problem, and now chrome uses google V8 javascript engine instead JavaScriptCore (default javascript engine from webkit), this problem seems to be solved in Chrome's last versions. Maybe it can be a problem on JavaScriptCore do not dispatching the ready or load events since DOM is already loaded on the document before the iframe has been constructed. A temporary solution could be set a flag to check if the content was initialized. Put a five to ten secs timer with setTimeOut to check this flag. If it not initialized, then call it on the setTimeOut callback. So if safari doesn't call the load or ready events, the setTimeOut could do it for you. Of course, don't put it inside your jquery layer. Put it as a pure javascript tag inside your HTML to be loaded by the iFrame.
回答5:
Check the response headers in the page that you're trying to put into the iframe. You're looking for a header called x-frame-options.
This is a new security option that tells the browser not to load the frame content. Lots of web servers will add it by default.
It's something worth checking.
回答6:
Reason for not working is because the browser mark the iframe as insecure.
To fix this just add a charset to the head of the page that you want to display:
< head ><br/>
< meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"/><br/>
< /head><br/>
来源：https://stackoverflow.com/questions/3103943/jquery-iframe-not-working-in-chrome