JQuery does not work in my Facebook application in Internet Explorer - access denied

Question

I just spent about 5 hours sorting this problem out, so I decided to share how I got over it, it would be useful to someone and save some time (it seems this is a fairly recent fix - 9 hours ago when posting this question - what am I found here ).

I am using jQuery version 1.10.1.

Overview

I am creating a Facebook tab application. This is the application form for participation in the contest, in which the visitor enters some information and uploads the photo they received on their last vacation. I have a form that works in all browsers before embedding on Facebook.

• The form is submitted using $.post() . The PHP script that tells jQuery in this process is in the same domain as the form itself.
• Before you can submit the form, you must upload the file. The file upload process is structured like this:
  • There is a <div> that acts like a button. Inside this div there is a field <input type="file" /> with its opacity equal to 0.
  • When you click on an invisible file input, the user selects the file.
  • When a file is selected, the .change() event .change() , and the <div> displays the text "Click again to upload." I did this and did not immediately upload the file, because during my research I found out that Internet Explorer does not like it when you submit the form inside the .change() handler attached to the file input.
  • When you click div again, the form is submitted via .submit() . The form is for a hidden iframe. Loading creature files and ending the iframe fires the .load() event.
  • The handler for the download event uses .contents().find("div").html() to get some string JSON that I sent back to the PHP script that controls the file upload. JSON contains the file upload status and the URL of the processed image if it was successful.

Problem

The application works fine in all browsers except Internet Explorer when it is built into Facebook. In the Internet Explorer console, the console indicated the following:

• SCRIPT5: Access Denied.
• SCRIPT5009: '$' - undefined.

First, I investigated the second error and came across everything that I expected to see and already checked, for example:

• The path to the script is incorrect.
• An htaccess file may exist that blocks access to the file.
• the script is not loaded correctly, clear the cache, etc. and try again.
• The possibility is that I was trying to use a script that required jQuery before it was loaded.

I double-checked all this data and confirmed that it is not. Then I switched to the "Access Deprived" error, and all the material I find indicates a problem with cross-domain requests using AJAX. There are also some articles that mention file uploads, but nothing that was 100% related to me in this case.

Question

Why am I getting these errors in Internet Explorer when I try to use jQuery on a page embedded in Facebook? I got them even when I deleted all the other scripts on the page (with the exception of jQuery), so I assume this is caused by the presence of a hidden iframe that I have on the page to deal with image loading.

Answer 1

First, I deleted all the other scripts on the page, after which I received only the following error (obviously, because I no longer tried to use $ ):

• SCRIPT5: Access Denied.

After trying about a dozen things (and their combinations) that I found on the Internet, I decided to use a non-minified version of jQuery so that I could more accurately determine the line that was causing my problem. After downloading this and looking at the console, I pointed to line 1513, which looked like this:

 if ( parent && parent.frameElement ) { 

Above this line was a comment in which the problem I encountered was noted:

 // IE will throw "permission denied" error when accessing "document" variable, see jQuery #13936 

I googled jQuery #13936 and stumbled upon this page , which suggested replacing the following line:

 if ( parent && parent.attachEvent && parent !== parent.top ) { 

After making this change, I was glad that the problem was resolved and my form was working properly. I checked the other browsers again and can confirm that they still work as expected.

Answer 2

solvable

This is a legitimate jQuery 1.10.1 : http://bugs.jquery.com/ticket/13980 .
Using jQuery 1.10.0 or 1.10.2 , the error no longer occurs.