在彈出窗口中顯示進度條將顯示頁面

我有struts應用程序，點擊鏈接打開一個新窗口。新打開的窗口需要時間來渲染內容，同時我想顯示一個進度條。我嘗試了onLoad事件，但它在頁面呈現後被觸發，並且我想從打開窗口直到呈現內容時顯示進度條。在彈出窗口中顯示進度條將顯示頁面

2016-11-30 Dark Knight

你不能顯示任何東西，直到頁面呈現之前 - 或者，如果這樣的事情發生表述的至少一部分 - 進度條......怎麼會在進度條「知道」多少頁在呈現之前呈現？ –

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

您可以直接將進度條嵌入到頁面中，並對頁面內容的其餘部分進行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>

來源

2016-11-30 07:46:36 elfan

這裏有一個問題，在我的情況下，我需要將表單提交到帶有表單數據的URL。有了這段代碼，我不知道我能做到這一點 –

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

在彈出窗口中顯示進度條將顯示頁面

回答

相關問題