Question

编辑：经过一些研究后，我想我可能正在寻找答案，但我仍然需要一些帮助。如果我理解正确的话，我的php脚本在查询MySQL数据库后没有找到任何内容时返回空答案，所以不是保持请求打开，如果它没有任何内容要发送，它会返回一个空答案到get请求，我刚刚打开另一个请求的JavaScript，导致偏离预期的＆＃34;长轮询＆＃34;行为。所以，我现在认为问题出在我的chatserver.php脚本中。如何让它停止返回空答案？ if（true）{break;} else {continue;}这个东西是我在最初把聊天服务器脚本放在一起时遇到的东西，而且我不确定我是否理解它为什么会起作用。

我正在开发一个相当大规模的Web应用程序，其中包含大量内容，而Chrome正在让我感到满意。我会尽可能简洁地解释我的问题，但是有很多代码可以用来创建这个问题。

我使用长轮询Ajax请求调用php脚本将消息推送回客户端页面中的div。这是Ajax代码：

function poll(){
var messageListener = new XMLHttpRequest();
messageListener.onreadystatechange=function(){
    if(messageListener.readyState==4 && messageListener.status==200){
        document.getElementById("main_view").innerHTML+=messageListener.responseText;
        document.getElementById("main_view").scrollTop = document.getElementById("main_view").scrollHeight;
        poll();
    }
}
messageListener.open("GET","chatserver.php",true);
messageListener.send();
}


poll();

正如您所看到的，该功能在页面加载时启动，并且在收到响应时，它再次运行，因此我始终有一个请求打开，服务器可以使用它来推送聊天消息。所有这些都在最新版本的Chrome，IE和Firefox中发挥得淋漓尽致。当我使用CSS工具提示向div发送链接时，会出现问题。我设置了指针事件：无;以及定位和z索引我的CSS中的所有元素，以便工具提示在IE和Firefox中表现得非常漂亮，但在Chrome中，我得到了臭名昭着的工具提示闪烁＆＃34;。

chatserver.php脚本基本上在无限循环中运行，该循环向数据库查询新的聊天消息并回显它们。

while(true){
    if(true){
    //query database for new messages and echo them
    break;
    } else {
    continue;
    }
}

问题出现了，因为Chrome似乎不断刷新＆＃34; main_view＆＃34;每次循环运行时div。我可以通过＆＃34; Inspect Element＆＃34;看到这种情况。在Chrome中。其他浏览器不会更新div，直到有实际的新信息。

这是css。

*{
margin: 0px;
padding: 0px;

}
#view_wrapper{
width:1010px;
height:705px;
position: relative;
overflow: hidden;

}
#main_view{
position: relative;
z-index: 96;
width: 1000px;
height: 700px;
font-family: Lucida Console;
text-align: left;   
overflow: auto;
margin-right: 30px;
padding-right: 30px;
pointer-events: none;
}

#command_line{

width: 964px;
height: 25px;
border: 1px solid #000;
}
#submit{

width: 45px;
height: 25px;

}
#main_view a{
pointer-events: auto;
position:relative;
z-index:98;
}

#main_view a span{
pointer-events: none;
position:absolute;
z-index: 97;
}
.tooltip {outline:none; color: crimson; pointer-events: none;}
.tooltip strong {line-height:30px; color: crimson; pointer-events: none;}
.tooltip:hover {text-decoration:none; pointer-events: none;}
.tooltip span {
pointer-events: none; left:100%; bottom: 25%;
position:absolute; visibility:hidden; padding:10px;
width:300px; height: 110px;line-height:16px;
} 
.tooltip:hover span{
pointer-events: none;
position:absolute;  
border:2px solid #FFF;  color:#EEE;
background:#333 url(css-tooltip-gradient-bg.png) repeat-x 0 0;
border-radius:2px;        
box-shadow: 0px 0px 8px 4px #666;
visibility:visible; z-index:97;
}

页面的html结构基本上是：

<html>
    <body>
    <center>
    <div id="view_wrapper>
    <div id="main_view">
    </div>
    </div>
    </center>
    </body>
</html>

如果不明显，我试图做的就是完全以基于浏览器的格式重新创建老式MUD游戏的功能。除了这个恼人的工具提示问题，它到目前为止还顺利进行！将您链接到我的应用程序很困难，因为您需要拥有一个帐户并获取一些项目才能看到问题。我无法发布图片，但您可以在此处看到屏幕截图：http://img.photobucket.com/albums/v600/threadreaper/screenshot_zps8381bacb.jpg

如何阻止Chrome不断刷新该div并使工具提示闪烁？

Answer 1

这解决了我的工具提示闪烁问题：

function poll(){
var messageListener = new XMLHttpRequest();
messageListener.onreadystatechange=function(){
    if(messageListener.readyState==4 && messageListener.status==200)    {

        if(messageListener.responseText.length != 0){
            document.getElementById("main_view").innerHTML+=messageListener.responseText;
            document.getElementById("main_view").scrollTop = document.getElementById("main_view").scrollHeight;
        }
        poll();
    }
    }
    messageListener.open("GET","chatserver.php",true);
    messageListener.send();
}

我仍然遇到Chrome打开一百万个GET请求的问题，因为它从PHP脚本中得到空答案，但由于这超出了原始问题的范围，我会考虑回答这个问题。

如何防止Ajax长轮询在Chrome中重新加载div？

1 个答案: