1
我正在實現與iFrame的jQuery UI對話框。該對話框有一個帶有文件上傳頁面的iFrame。
一切都很好，但從iFrame頁面關閉對話框出現問題。下面與iFRAME的jQuery UI對話框
是我的代碼：
父頁
<!-- 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，但未能成功。
我認爲你完全錯誤地關注了這個問題。爲什麼你需要使用iframe？ –
@Leandro，由於文件上傳，我使用iFrame。這是一個類似的問題http://stackoverflow.com/questions/4392146/close-jquery-ui-dialog-from-iframe?rq=1，但它並沒有解決我的問題。我最終得到了一個解決方案。這是因爲iFrame src的動態變化。無論何時打開對話框，我都必須動態更改iFrame src。我將在稍後提交答案。 – Sithu