2013-08-06 67 views
5

IEで非表示のiFrame経由でファイルをアップロードする際に問題が発生しています。実際にはファイルのアップロードはうまくいきますが、成功ダイアログを表示してテーブルへのリンクを追加するjQueryコードは起動しません。 IEの開発者ツールを使用して、私はSCRIPT70:Permission deniedエラーメッセージを発見しました。これはChromeで正常に動作しているため、IEの問題を紛失しています。私はIE10を使用していることを言及する必要がありますので、IEの以前のバージョンにも問題が存在すると思います。SCRIPT70:IEでiFrameへのアクセスが拒否されました

私がやろうとしているのは、従来のブラウザをサポートする必要があるため、非公開のiFrameを使用してファイルをアップロードするようなAjaxをシミュレートすることです。 iFrameが正常にポストするとJSONが含まれているdivがあり、それを解析して解析します。 JSONからのデータを使用して、ファイルアップロードのステータスを示すメッセージをユーザに表示し、テーブルに行を追加してリンクをページに追加します。しかし、IEでは、chechUploadResponse関数は起動していないようです。

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(); 
} 

非表示の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> 

が、私はこの記事が少し古いです知っ

<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> 
+0

これはjQueryのバグであったかもしれません。私はjQuery-1.9.1からjQuery-1.10.2にアップグレードしました。それは私の問題を解決するようでした。興味のある人のためにjQueryのウェブサイトでこれが報告されています。これが似たような問題を抱えている人を助けることを望みます。 http://bugs.jquery.com/ticket/13936 – greyfox

答えて

8

を掲載された後、非表示のiframeから例の応答でありますこれはIEの周りの謎のための将来の探求者を助けるかもしれない。

提案するソリューションは、jQueryのライブラリに適用する必要があります。 問題は、ここで説明されています https://connect.microsoft.com/IE/feedback/details/802251/script70-permission-denied-error-when-trying-to-access-old-document-from-reloaded-iframe

、溶液をここに与えられます。

https://github.com/jquery/sizzle/blob/5b3048605655285a81b06fbe4f49f2a14a8d790f/src/sizzle.js#L472-L480

代替ソリューションは、jQueryのバグ報告サイトでこのチケットの下にあります。これは、ユーザーによって投稿されhttp://bugs.jquery.com/ticket/14535 muleyとJSFiddleも提供されています。http://jsfiddle.net/xqb4s/

追加する必要のあるコードこの場合、jQueryライブラリである:

// 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. 
} 

の下:それは結局のところ

function Sizzle(selector, context, results, seed) 
+0

これは私の問題を解決し、私の一日を保存しました!私のシナリオは、iframe内のページは、内側のドキュメントがロードされた後、外側のドキュメントのjqueryが外側のドキュメントのjqueryベースの関数を呼び出すと、外側のドキュメントのjqueryがもう動作していないだけです。 –

+0

JS uglify/minifyツールによって 'document === document'行が削除されますが、許可拒否を引き起こす別の方法はありますか?ありがとう。 –

+0

jquery 2.2.4を使用しています。ソリューションを見つけたり、そのようなコードを見つけることができません。このバージョンを提供してください。 –

関連する問題