强制通过Javascript更改页面内容 [英] Forcing page content to change through Javascript

问题描述

我想在ajax请求期间向用户显示一些视觉进度.例如，当他单击向服务器端脚本发出AJAX请求的处理"按钮时，他将看到正在加载..."消息和图形，但我也想向他展示一些处理量的进度完毕.例如5/10 processed, 6/10 processed...，依此类推.

I'd like to show some visual progress to a user during an ajax request. E.g when he clicks a 'process' button which makes an AJAX request to a server-side script, he will see a 'loading...' message and a graphic, but I also want to show him some progress of how much processing is done. E.g 5/10 processed, 6/10 processed... and so on.

反正有这样做吗?

推荐答案

是的，但是确实有点复杂.我发现的唯一方法是在客户端上使用iframe，然后在服务器上使用response.write将javascript块发送回客户端，该javascript在父窗口上调用以处理状态消息.

Yep, there is, but it is kind of complicated. The only way I've found is using an iframe on the client, and response.writeing on the server to send blocks of javascript back to the client, that javascript calls on the parent window to process the status messages.

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

Here's some sample code. There may be problems with it, I'm snipping it out of a much bigger app.

html:

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

javascript:

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，但是您应该能够使用选择的语言来做到这一点):

server side (this is vb asp.net, but you should be able to do it in your language of choice):

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

一些观察

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

• Querystring will be your friend here. I'm not sure if you can programatically postback to an iframe
• You will probably have to add some cachebusting garbage to the querystring, otherwise the browser will more than likely cache the contents. It'll be very very quick, but wrong :-)
• You might need to send "some" html before the browser starts processing the iframe stuff. I've found that sending a HTML comment of about 1k of garbage helps
• To avoid refresh problems in FF, and "forever loading" problems in chrome and safari, set the iframe's src to about:blank once you're done ($('#iframeHolder iframe').attr('src','about:blank'))
• the jQuery UI progress bar looks pretty swanky for displaying the percent processed

希望有帮助.几个月前，我为此感到头疼:-)

Hope that helps. I tore my head out with this a couple of months ago :-)

这篇关于强制通过Javascript更改页面内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！