1

显然，Safari 在提交事件期间不会重新绘制 DOM。我的代码在提交处理程序中包含一个 ajax 函数。我无法将表单或提交按钮的操作更改为<button>. 在 ajax 函数内部，我正在计算进度条的宽度并相应地调整 div。这适用于 Chrome 和 FF。不在 Safari 中。当我停止浏览器时，会显示进度条。

我想知道如何强制 Safari 在我的 ajax 函数中重新绘制 DOM。它看起来像这样：

$('#webfileuploadform').bind('submit',function(){
    var $progress = $('<div id="upload-progress" class="upload-progress"></div>').appendTo($('#webfileuploadform')).append('<div class="progress-container"><div class="progress-info">uploading 0%</div><div class="progress-bar"></div></div>');
    function update_progress_bar(){
        $.ajax({
            dataType:"json",
            async: false,
            url: progress_url,
            success: function(data){


                $progress.show();  // This shows the progress bar. I imagine 
                                   // this is where I would want to re-paint the DOM


                if(data.status == "uploading"){
                    var total_progress = parseInt(data.uploaded) / parseInt(data.length);
                    var width = $progress.find('.progress-container').width();
                    var progress_width = Math.round(width * total_progress);
                    var progress_px = progress_width + 'px';
                    $progress.find('.progress-bar').animate({'width':progress_px});
                    $progress.find('.progress-info').text('uploading ' + parseInt(total_progress*100) + '%');
                } else if (data.status == "not-found") {
                    $progress.find('.progress-bar').animate({'width':'100%'});
                    $progress.find('.progress-info').text('uploading 100%');
                    stop = 'Flag for end-of-file';
                } else {
                    //console.log('Ajax Error');
                }
            },
            error: function(textStatus){
                console.log("ERROR: " + textStatus);
            }
        });

        // Check flag to see if user stopped the page to cancel the ajax requests
        if(typeof stop == 'undefined'){
            // Iterates the ajax requests
            setTimeout(function(){update_progress_bar()}, freq);
        } else {
            setTimeout(function(){
                $progress.animate({opacity:0.5},1000);
            },freq);
            $progress.find('.progress-info').text('Refresh the page to continue.');
        }
    }

    // Initiate the ajax requests
    setTimeout(function(){update_progress_bar()}, freq);

});
4

1 回答 1

0

我会推荐使用forceDOMReflowJS。在您的情况下，您的代码如下所示。此外，您的代码并不像我认为的那样完全有效，因此我也修复了您的代码。

$('#webfileuploadform').bind('submit',function(){
    var $progress = $('<div id="upload-progress" class="upload-progress"></div>');
    // I believe you forgot to separate your attachments section of the code from
    // the variable declaration
    $progress.appendTo($('#webfileuploadform')).append('<div class="progress-container"><div class="progress-info">uploading 0%</div><div class="progress-bar"></div></div>');
    function update_progress_bar(){
        $.ajax({
            dataType:"json",
            async: false,
            url: progress_url,
            success: function(data){
                $progress.show();
////////////////////////////////////////////////////////////////////////////////
                // Perform the reflow (even though I don't really see how it would change things)
                forceReflowJS( $progress[0] );
////////////////////////////////////////////////////////////////////////////////
                if(data.status == "uploading"){
                    var total_progress = parseInt(data.uploaded) / parseInt(data.length);
                    var width = $progress.find('.progress-container').width();
                    var progress_width = Math.round(width * total_progress);
                    var progress_px = progress_width + 'px';
                    $progress.find('.progress-bar').animate({'width':progress_px});
                    $progress.find('.progress-info').text('uploading ' + parseInt(total_progress*100) + '%');
                } else if (data.status == "not-found") {
                    $progress.find('.progress-bar').animate({'width':'100%'});
                    $progress.find('.progress-info').text('uploading 100%');
                    stop = 'Flag for end-of-file';
                } else {
                    //console.log('Ajax Error');
                }
            },
            error: function(textStatus){
                console.log("ERROR: " + textStatus);
            }
        });

        // Check flag to see if user stopped the page to cancel the ajax requests
        if(typeof stop == 'undefined'){
            // Iterates the ajax requests
            setTimeout(function(){update_progress_bar()}, freq);
        } else {
            setTimeout(function(){
                $progress.animate({opacity:0.5},1000);
            },freq);
            $progress.find('.progress-info').text('Refresh the page to continue.');
        }
    }

    // Initiate the ajax requests
    setTimeout(function(){update_progress_bar()}, freq);

});
于 2018-03-26T18:48:12.740 回答