Just spent about 5 hours sorting out this issue, so I thought sharing how I overcame it would be helpful to someone and save them some time (it seems to be a pretty recent fix - 9 hours ago at the time of posting this question - which I found here).
I am using jQuery version 1.10.1.
Overview
I am building a Facebook tab application. It is a competition entry form where the visitor will enter some information and upload a photo that they took on a recent holiday. I have the form working in all browsers before being embedded into Facebook.
$.post()
. The PHP script that jQuery points to in this process is on the same domain as the form itself.<div>
which acts as a button. Within this div, there is an <input type="file" />
field with its opacity set to 0..change()
event is triggered and the <div>
will display the text 'Click again to upload'. I did this rather than having the file upload immediately because during my research, I learned that Internet Explorer doesn't like you submitting a form within a .change()
handler attached to a file input..submit()
. The form targets a hidden iframe. The file beings uploading, and on completion the iframe triggers a .load()
event..contents().find("div").html()
to get some stringified JSON that I have sent back in the PHP script that manages the file upload. The JSON contains the status of the file upload, and the URL to the processed image if it was successful.Problem
The application works fine in all browsers except for Internet Explorer when it is embedded into Facebook. Internet Explorer gave the following in the console:
I've researched the second error first and came across all the stuff that I expected to come across and already checked, such as:
I have double checked all of these and confirmed they are not the case. I then moved onto the 'Access is denied' error and all the material I am coming across points to an issue regarding cross-domain requests using AJAX. There are also some articles that mention file uploading specifically, but nothing that was 100% relevant to me in this case.
Question
Why am I getting these errors in Internet Explorer when I try to use jQuery in an page that is embedded into Facebook? I got them even when I removed every other script on the page (except for jQuery), so I assume it is triggered by the presence of the hidden iframe that I have on the page to deal with image uploads.
First, I removed every other script on the page, at which point I only received the following error (obviously because I wasn't trying to make use of $
anymore):
After trying about a dozen things (and combinations of those) that I found around the internet, I decided to use the non-minified version of jQuery so that I could more accurately determine the line that was causing my issue. After uploading that and taking another look in the console, I was pointed to line 1513, which looked like this:
if ( parent && parent.frameElement ) {
Above this line was a comment which made note of the issue that I was experiencing:
// IE will throw "permission denied" error when accessing "document" variable, see jQuery #13936
I Googled jQuery #13936
and came across this page, which suggested that I swap out the above line with:
if ( parent && parent.attachEvent && parent !== parent.top ) {
After making this change, I was glad to find the issue resolved and my form working as expected. I double checked the other browsers again and can confirm that they still work as expected as well.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With