jQuery is not working in my Facebook Application in Internet Explorer - Access is denied

Question

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.

• The form is submitted using $.post(). The PHP script that jQuery points to in this process is on the same domain as the form itself.
• Before you can submit the form, you must upload a file. The file upload process is built like so:
  • There is a <div> which acts as a button. Within this div, there is an <input type="file" /> field with its opacity set to 0.
  • When the invisible file input is clicked, the user selects a file.
  • When the file is selected, a .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.
  • When you click the div again, the form is submitted via .submit(). The form targets a hidden iframe. The file beings uploading, and on completion the iframe triggers a .load() event.
  • The handler for the load event uses .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:

• SCRIPT5: Access is denied.
• SCRIPT5009: '$' is undefined.

I've researched the second error first and came across all the stuff that I expected to come across and already checked, such as:

• The path to the script is wrong.
• There may be a htaccess file blocking access to the file.
• The script hasn't loaded correctly, clear cache etc and try again.
• The possibility that I was trying to use a script that required jQuery before it was loaded.

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.

Answer 1

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):

• SCRIPT5: Access is denied.

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.