SCRIPT70: Permission denied Accessing iFrame in IE
iframe, internet-explorer, jquery
Solution
I know this post is a bit old, but this may help future seekers for the mystery around IE.
The solution proposed needs to be applied to the library of jQuery. The problem is explained here: https://connect.microsoft.com/IE/feedback/details/802251/script70-permission-denied-error-when-trying-to-access-old-document-from-reloaded-iframe
and the solution is given here:
https://github.com/jquery/sizzle/blob/5b3048605655285a81b06fbe4f49f2a14a8d790f/src/sizzle.js#L472-L480
An alternative solution is located under this ticket at jQuery bug reporting site: http://bugs.jquery.com/ticket/14535 It is posted by user muley and a JSFiddle is provided as well: http://jsfiddle.net/xqb4s/
The code that needs to be added in jQuery library in this case is:
// MY EDIT - this try/catch seems to fix IE 'permission denied' errors as described here:
// http://bugs.jquery.com/ticket/14535
try{
document === document; //may cause permission denied
}
catch(err){
document = window.document; //resets document, and no more permission denied errors.
}
Under the:
function Sizzle( selector, context, results, seed )
Problem
I am having some issues in IE with uploading files through a hidden iFrame. Actually the file upload is working fine but my jQuery code to display the success dialog and add the link to a table is not firing. Using the IE developer tools I discovered SCRIPT70: Permission denied error message. This is working fine in Chrome so I'm at a loss to what the issue is in IE. I should mention I am using IE10 so I imagine the issue exist in the previous versions of IE as well. Essentially what I am trying to do is simulate Ajax like file upload using a hidden iFrame since we have to support legacy browsers. When the iFrame post successfully its response has a div which contains JSON which I read then parse. The data from the JSON is used to display a message to the user indicating the status of the file upload as well and add the link to the page by adding a row to a table. However in IE the chechUploadResponse function does not even appear to be firing. Javascript: ``` $(document).ready(function() { $('#btnPrint').click(openPrintTimesheetWindow); $('#date').change(postback); $('#employee').change(postback); $('#client').change(postback); $('#btnUpload').click(uploadFile); $("#uploadFrame").on("load", function () { $('#uploadFrame').contents().find('#userFile').change(uploadFileChanged); checkUploadResponse(); }); }); function postback() { $('#timesheetPrintFilter').submit(); } function uploadFileChanged() { $('#ajaxBusy').show(); $('#uploadFrame').contents().find('#uploadForm').submit(); } function uploadFile() { var employeeId = $('#init_employee').val(); var periodDate = $('#init_periodEndDate').val(); $('#uploadFrame').contents().find('#employeeId').val(employeeId); $('#uploadFrame').contents().find('#periodEndDate').val(periodDate); $('#uploadFrame').contents().find('#userFile').click(); } function checkUploadResponse() { var response = $('#uploadFrame').contents().find('#uploadResponse').text(); if (response != null && response != '') { var response = jQuery.parseJSON(response); if (response.status == "ERROR") { $("#dialog").html(response.message); $("#dialog").dialog({ buttons: { "OK": function() { $(this).dialog("close");}}, title: "Error" }); } else { $("#dialog").html(response.message); $("#dialog").dialog({ buttons: { "OK": function() { $(this).dialog("close");}}, title: "Success" }); var url = response.url; var tsaid = response.tsaid; var name = response.name; var row = '<tr id="tsaid-' + tsaid + '">' + '<td width="80%" valign="top" align="left">' + '<a href="' + url + '">' + name + '</a>' + '</td>' + '</tr>'; $("#tsAttachment").append(row); } } $('#ajaxBusy').hide(); } ``` Hidden iFrame: ``` <form id="uploadForm" name="uploadForm" action="timesheet-upload.php" method="POST" enctype="multipart/form-data"> <input type="hidden" name="MAX_FILE_SIZE" value="3145728" /> <input type="hidden" name="employeeId" id="employeeId" value="" /> <input type="hidden" name="periodEndDate" id="periodEndDate" value="" /> <input type="file" name="userFile" id="userFile" /> </form> ``` Here is an example response from the hidden iFrame after being posted ``` <div id="uploadResponse">{"status":"SUCCESS","message":"Timesheet successfully uploaded","url":"uploads\/2013\/Aug\/1-49cd1c0217abf676505b349ec88bb5a42b1d5631e41232f08be3b0dced9f65e2.pdf","name":"How To Write A Cover Letter.pdf","tsaid":15}</div> <form id="uploadForm" name="uploadForm" action="timesheet-upload.php" method="POST" enctype="multipart/form-data"> <input type="hidden" name="MAX_FILE_SIZE" value="3145728" /> <input type="hidden" name="employeeId" id="employeeId" value="" /> <input type="hidden" name="periodEndDate" id="periodEndDate" value="" /> <input type="file" name="userFile" id="userFile" /> </form> ```