我已经搜索过类似的问题(例如Chrome 在隐藏后不会重绘 <div>并在 Chrome/Mac 上强制 DOM 重绘/刷新),但没有一个问题能解决我的问题。我正在编写调制解调器配置面板,带有 ,,tabs'' 的网页。在每个选项卡上都有一些设置 - 就像任何路由器的配置面板一样。
保存配置(当用户点击保存按钮时完成)需要几秒钟(我的嵌入式平台不是速度之王),所以我决定放置特殊的 PLEASE WAIT 窗口(准确地说是 div),它通常是隐藏的,但在需要时显示让用户平静下来:-)。
在 Firefox 上一切正常:点击保存后,请等待 div 显示,然后使用 POST 方法保存配置。但是,在 Chrome 26 和 Chromium 25 上,在保存配置之前 div 不会显示。正如您SaveConfiguration
在执行保存配置的 PHP 脚本后在函数中看到的那样,会显示警报 - 这是 Chrome 上显示 PLEASE WAIT div 的位置。看起来 Chrome 没有重绘页面,而是立即开始启动 POST 脚本。有没有人有类似的问题,现在如何解决这个问题?
下面是我的代码片段,我只提供了可能会提示我在做什么的函数。如果有帮助,我可以发布更多代码。
function showLoadingScreen(yes)
{
if(yes)
{
document.getElementById("loadingtext").innerHTML="Please wait...";
document.getElementById("loading_overlay").style.display="block";
document.getElementById("loading_window").style.display="block";
}
else
{
document.getElementById("loading_overlay").style.display="none";
document.getElementById("loading_window").style.display="none";
}
}
function postDataSync(url, params)
{
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest)
{
XMLHttpRequestObject = new XMLHttpRequest();
} else
if (window.ActiveXObject)
{
XMLHttpRequestObject = new
ActiveXObject("Microsoft.XMLHttp");
}
if(XMLHttpRequestObject)
{
XMLHttpRequestObject.open("POST", url, false);
XMLHttpRequestObject.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
XMLHttpRequestObject.send(params);
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200)
{
var result = XMLHttpRequestObject.responseText;
delete XMLHttpRequestObject;
XMLHttpRequestObject = null;
return result;
}
}
}
return '';
}
function SaveConfiguration()
{
var errors=checkForm();
if(errors!="")
{
printError("Can't save configuration because there are errors in current tab:<br><br>"+errors);
return;
}
showLoadingScreen(true);
saveTab();
var retval=postDataSync('actions/saveconf3.php','');
alert("Settings saved. The modem is now being reconfigured.");
document.location = "http://" + retval;
}