javascript - 通过Javascript强制改变页面内容

Question

我想在 ajax 请求期间向用户显示一些视觉进度。例如，当他单击“进程”按钮向服务器端脚本发出 AJAX 请求时，他将看到“正在加载...”消息和图形，但我还想向他展示处理量的一些进度完毕。例如 5/10 已处理、6/10 已处理... 等等。

有办法做到这一点吗？

Answer 1

是的，有，但是有点复杂。我发现的唯一方法是在客户端上使用 iframe，并在服务器上使用 response.writeing 将 javascript block 发送回客户端，该 javascript 调用父窗口来处理状态消息。

这是一些示例代码。它可能有问题，我正在将它从一个更大的应用程序中剪掉。

html:

<button id="doStuff">
<div id="status"></div>
<div id="iframeHolder"></div>

JavaScript:

//This one will be called from the HTML the javascript is streaming back
function updateStatus(message) {
    $('#status').html(message);
}
$('#doStuff').click(function(event) {
    event.preventDefault();
    var url="your.page.html";
    $('#iframeHolder').html('<iframe src="' + url + '"></iframe>');
}

服务器端(这是 vb asp.net，但您应该能够使用您选择的语言来完成此操作):

dim message as string = "hello world"
dim script = String.Format("<script type='text/javascript'>parent.updateStatus('{0}');</script>",message)
Response.Write(script)
Response.Flush()

一些观察

• 查询字符串将是您的 friend 。我不确定您是否可以以编程方式回发到 iframe
• 您可能需要在查询字符串中添加一些缓存清除垃圾，否则浏览器很可能会缓存内容。它会非常非常快，但错误:-)
• 您可能需要在浏览器开始处理 iframe 内容之前发送“一些”html。我发现发送大约 1k 垃圾的 HTML 评论会有所帮助
• 为了避免 FF 中的刷新问题以及 chrome 和 safari 中的“永远加载”问题，请在完成后将 iframe 的 src 设置为 about:blank ($('#iframeHolder iframe').attr(' src','about:blank'))
• jQuery UI 进度条在显示已处理百分比时看起来非常时髦

希望有帮助。几个月前我为此伤透了脑筋:-)