Question

我正在使用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 } ?>

我也在iFrame中尝试过此window.parent.$('#dialog-upload').dialog('close');，但失败了。

Answer 1

这是jQuery Mobile使用iFrame的错误。请参考：https://github.com/jquery/jquery-mobile/issues/4822

使用iFRAME的jQuery UI对话框

1 个答案: