在弹出窗口中显示进度条将显示页面

问题描述：

我有struts应用程序，点击链接打开一个新窗口。新打开的窗口需要时间来渲染内容，同时我想显示一个进度条。我尝试了onLoad事件，但它在页面呈现后被触发，并且我想从打开窗口直到呈现内容时显示进度条。在弹出窗口中显示进度条将显示页面

你不能显示任何东西，直到页面呈现之前 - 或者，如果这样的事情发生表述的至少一部分 - 进度条......怎么会在进度条“知道”多少页在呈现之前呈现？ –

我明白了。我有一些应用程序发生同样的事情，不知道如何？是否有任何破解 –

您可以直接将进度条嵌入到页面中，并对页面内容的其余部分进行AJAX调用。 AJAX也可以用来确定可以用来移动进度条的内容的数量。 – user2507

答

Spinner（而不是进度条）可以接受吗？

如果是，下面的代码将打开一个空白的新窗口，在该新窗口上显示一个微调图标，将目标url加载到隐藏的iframe中。当加载iframe时，显示iframe并隐藏微调器。

<button onclick="popup('http://wikipedia.com')">Pop up</button> 
<script> 
var myWin; 
function popup(url) { 
    myWin = window.open("", "_blank"); 
    myWin.document.write('<body style="margin:0; padding: 0; text-align: center" frameborder="0"> \ 
          <iframe src="' + url + '" \ 
           onload="opener.loadHandler(this)" \ 
           style="display: none; position: absolute; border: 0; width: 100%; height: 100%"> \ 
          </iframe> \ 
          <img id="spinner" src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif"> \ 
          </body>'); 
} 

function loadHandler(frame) { 
    frame.style.display = "block"; 
    myWin.document.getElementById("spinner").style.display = "none"; 
} 
</script>

UPDATE：表单提交

下面的代码将打开一个空白的新窗口，显示在新的窗口中旋转的图标，创建一个隐藏的iframe的表单，并提交。当加载iframe时，显示iframe并隐藏微调器。

<button onclick="popup('http://wikipedia.com', {foo: 'foo', bar: 'bar'}, 'GET')">Pop up</button> 

<script> 
var myWin; 
function popup(url, params, method) { 
    myWin = window.open("", "_blank"); 
    myWin.document.write('<body style="margin:0; padding: 0; text-align: center" frameborder="0"> \ 
          <iframe src="" \ 
           onload="opener.loadHandler(this)" \ 
           style="display: none; position: absolute; border: 0; width: 100%; height: 100%"> \ 
          </iframe> \ 
          <img id="spinner" src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif"> \ 
          </body>'); 
    myWin.frames[0].document.body.innerHTML = createForm(url, params, method); 
    myWin.frames[0].document.forms[0].submit(); 
} 

function loadHandler(frame) { 
    frame.style.display = "block"; 
    myWin.document.getElementById("spinner").style.display = "none"; 
} 

function createForm(url, params, method) { 
    //create a form 
    var html = '<form action="' + url + '" method="' + (method || 'POST') + '">'; 

    //inserting params as hidden inputs 
    for (var key in params) { 
     var val = (params[key] || '').toString().replace(/"/, '&quot;'); 
     html += '<input type="hidden" name="' + key + '" value="' + val + '">'; 
    } 
    html += '</form>'; 
    return html; 
} 

</script>

这里有一个问题，在我的情况下，我需要将表单提交到带有表单数据的URL。有了这段代码，我不知道我能做到这一点 –

我更新了我的答案，提交表单的能力。 – elfan

在弹出窗口中显示进度条将显示页面

相关推荐