我正在用 iFrame 实现一个 jquery UI 对话框。该对话框有一个 iFrame，它有一个文件上传页面。
一切都很好，但是从 iFrame 页面关闭对话框有问题。
以下是我的代码：
父页面
<!-- Upload File Form -->
<div id="dialog-upload" class="dialog" title="Upload File" style="display:none">
<div class="message error"></div>
<iframe id="upload-form" src="file_upload.php" width="276" height="195" frameborder="0"></iframe>
</div>
<!-- button to launch the dialog -->
<button id="btnUpload">Upload</button>
<script type="text/javascript">
function _finishUpload(){
console.log($('#dialog-upload')); // the element was outputed in the console
$('#dialog-upload').dialog( 'close' ); // the dialog is not closed.
//$('#dialog-upload').hide() // this code was executed.
}
function _fileUpload(){
var doc = $('#upload-form')[0].contentWindow; // iframe document
$('#dialog-upload').find('.message').html('').hide();
var file = doc.$('form').find('#file').val();
if( ! file ){
$('#dialog-upload').find('.message').html('Please select a file.').show();
}else{
doc.$('form').submit(); // submit the form in the iFrame dialog
}
},
$(document).ready( function(){
$( "#dialog-upload" ).dialog({
modal: true,
autoOpen: false,
resizable: false,
buttons: {
OK: function() {
_fileUpload();
},
Cancel: function(){
$(this).dialog( "close" );
}
}
});
$( '#btnUpload' ).click(function(){
$('#dialog-upload').dialog( 'open' );
});
} );
</script>
IFRAME 页面
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<div class="dialog" style="display:block">
<form name="frmFileUpload" method="post" enctype="multipart/form-data">
<fieldset>
<label for="txtTitle">Upload File</label>
<input type="file" name="file" id="file" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>
</body>
</html>
<?php if(sizeof($_POST)){ # trigger this only when the form is submitted ?>
<script type="text/javascript">
window.parent._finishUpload(); // it was executed, but the dialog is not closed
</script>
<?php } ?>
我也在window.parent.$('#dialog-upload').dialog('close');iFrame 中尝试过，但失败了。