Question

我有struts应用程序，点击链接后会打开一个新窗口。新打开的窗口需要时间来呈现内容，同时我想显示进度条。我尝试过onLoad事件，但它在呈现页面后被解雇，我想从窗口打开直到呈现内容的时刻显示进度条。

Answer 1

旋转器（而不是进度条）是否可以接受？

如果是，则以下代码将打开一个空白的新窗口，在该新窗口上显示一个微调器图标，在隐藏的iframe中加载目标URL。加载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>

更新：提交表单

以下代码将打开一个空白的新窗口，在该新窗口上显示一个微调器图标，在隐藏的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>

弹出窗口中显示进度条直到呈现页面

1 个答案: