我的网站有一个简单的消息传递系统，用户可以在其中写消息，接收者会回复消息，这被定义为聊天。
我正在使用 HTML 来保持页面刷新，直到此人收到新消息。
<meta http-equiv="refresh" content="15;URL=chat_5999468.php"/>
它会每 15 秒刷新一次页面，因此如果有新消息侵入，它会弹出。 但是 即使收件人正在输入，它也会重新加载页面。
当用户在 jQuery 中键入消息时，我如何防止重新加载？
编辑:页面HTML(与此类似):
<!DOCTYPE html> <head> <title>Untitled</title> <meta charset="UTF-8"/> <meta http-equiv="refresh" content="15;URL=chat_5999468.php"/> <style> #b { color: #000; } .chat-input input[type="text"] { width: 65%; height: 30px; border: 1px solid #999999; border-top-right-radius: 10px; border-bottom-left-radius: 15px; padding: 10px; color: #0084ff; margin-left: 5px; margin-top: 10px; margin-bottom: 10px; } input:focus,button:focus,input,button { outline: none!important; } .chat-input input[type="submit"] { color: #000; background: url(/image/NAjD2.jpg) no-repeat; height: 47px; width: 47px; border: none; } .chat77 ul{ list-style: none; margin: 0; padding: 0; } .chat77 ul li{ display:inline-block; clear: both; padding: 8px; border-radius: 30px; margin-bottom: 2px; font-family: Helvetica, Arial, sans-serif; } .message-2 { background: #eee; float: left; } .message-me { float: right; background: #0084ff; color: #fff; } .message-2 + .message-me{ border-bottom-right-radius: 5px; } .message-2 + .message-me{ border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .message-me:last-of-type { border-bottom-right-radius: 30px; } </style> </head> <body> <div class="chat-input"><label><form method="post" action="chat_5999468.php" ><input type="text" name="txt" placeholder="Write here..." /><input type="submit" name="submit_msg" value="" /></form></label></div><center><div id="chat-status">Online Mark Zuckerberg | <a href="chat_5999468.php">Refresh</a></div></center><br /><div class="chat77"><ul><script>var book="Me: 3";if(book=="Me: 3" ){document.write("<li class='message-me'>3</li>");}else{document.write("<li class='message-2'><a href='/profile_12.php?u=Mark+Zuckerberg' id='b' target='_top'>3</a></li>");}</script><script>var book="Mark Zuckerberg: 2";if(book=="Me: 2" ){document.write("<li class='message-me'>2</li>");}else{document.write("<li class='message-2'><a href='/profile_12.php?u=Mark+Zuckerberg' id='b' target='_top'>2</a></li>");}</script><script>var book="Me: Message1";if(book=="Me: Message1" ){document.write("<li class='message-me'>Message1</li>");}else{document.write("<li class='message-2'><a href='/profile_12.php?u=Mark+Zuckerberg' id='b' target='_top'>Message1</a></li>");}</script></ul></div><br /> </body> </html>
最佳答案
我能想到的就是 jQuery.ajax()。在这里查看 jQuery API Documentation
如果您想为您的 meta 标记选择一个替代方案，这个答案适合您。
您可以获取更新站点的内容，搜索特定的 div 或类似内容，并检查是否有新条目。
这只是一个示例您可以如何做到这一点!
首先，创建一个循环函数:
setInterval(function(){
}, 15000); // The loop function will check every 15 seconds
之后，创建 ajax() 调用。
$.ajax({
url: 'YOUR URL HERE',
type: 'GET',
success: function(data) {
var check = $(data).find('#chat');
// Here you get the `div` -> `#chat`
// Now you could check if there is something new
}
});
我不知道您的聊天是如何编码的，但我认为有些东西带有时间戳。只需检查是否有一个 div(?) 的时间戳比您打开的站点更新:
var compareMe = $('#chat').find('.entry span').last().attr('class');
var compareOther = $(data).find('.entry span').last().attr('class');
在我的例子中，有一个带有 id="chat" 的 div 而这个 div 有一个 class= "entry 得到了 span 和 class="1504155239"(这是消息的时间戳)。
这是一个例子:
var compareMe = $('#chat').find('.entry span').last().attr('class');
console.log(compareMe);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chat">
<div class="entry">
<span class="1504155239">1504155239: </span>
Hello There! First!
</div>
<div class="entry">
<span class="1504155254">1504155254: </span>
Hey! Ah, I'm second?
</div>
</div>所以您现在唯一要做的就是检查 compareMe 和 compareOther 是否相同或更新。
// Lets cast them first to int because of reasons.
// Just kidding, it's safer to cast them and then check if they are newer
compareMe = parseInt(compareMe);
compareOther = parseInt(compareOther);
if (compareMe != compareOther && compareMe > compareOther) {
// Now you can reload.
}
最后看起来像这样:
THIS SNIPPET DON'T WORK!它只是在这里可视化它是如何完成的!
setInterval(function(){ // This is the loop function
$.ajax({
url: '<YOUR URL HERE>',
type: 'GET',
success: function(data) {
var check = $(data).find('#chat');
// Here you get the `div` -> `#chat`
var compareMe = $('#chat').find('.entry span').last().attr('class');
var compareOther = $(check).find('.entry span').last().attr('class');
// Now you could check if there is something new
// Lets cast them first to int because of reasons.
// Just kidding, it's safer to cast them and then check if they are newer
compareMe = parseInt(compareMe);
compareOther = parseInt(compareOther);
if (compareMe != compareOther && compareMe > compareOther) {
// Now you can reload.
}
}
});
}, 15000); // The loop function will check every 15 seconds<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chat">
<div class="entry">
<span class="1504155239">1504155239: </span>
Hello There! First!
</div>
<div class="entry">
<span class="1504155254">1504155254: </span>
Hey! Ah, I'm second?
</div>
</div>编辑
既然你在这里复制了你的HTML，我可以更具体地帮助你。
这是您的代码示例。
setInterval(function() {
$.ajax({
url: '/',
type: 'GET',
success: function(data) {
var check = $(data).find('.chat77');
var compareMe = $('.chat77').find('li').last().text();
var compareOther = $(check).find('li').last().text();
if (compareMe != compareOther && $('.chat-input').find('input').first().val() == "") {
location.reload();
}
}
});
}, 3000);
我希望您为消息添加时间戳并检查它而不是 strings。
关于javascript - 当用户要写东西时如何防止重新加载？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45954908/