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.
- There is a
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.