代码之家  ›  专栏  ›  技术社区  ›  S.G.

当用户要写东西时,如何防止重新加载?

  •  4
  • S.G.  · 技术社区  · 7 年前

    我的网站有一个简单的消息传递系统,用户写消息,收件人回复,这就是聊天。

    <meta http-equiv="refresh" content="15;URL=chat_5999468.php"/>
    

    它每隔15秒刷新一次页面,因此如果有新消息入侵,它就会弹出。 但是

    编辑 :页面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(https://i.stack.imgur.com/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> 
    
    1 回复  |  直到 5 年前
        1
  •  1
  •   Patrick Mlr    7 年前

    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
        }
    });
    

    我不知道你的聊天是怎么编码的,但我觉得有时间戳。只要检查一下是否有 部门

    var compareMe = $('#chat').find('.entry span').last().attr('class');
    var compareOther = $(data).find('.entry span').last().attr('class');
    

    就我而言 部门 id="chat" 这个有 部门 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.
    }
    


    这段代码无效!

    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
    <脚本src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“>lt;/script>
    你好!第一
    <span class=“1504155254”>1504155254:</span>
    嘿啊,我是第二?
    </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);
    

    我希望您在消息中添加一个时间戳并对此进行检查,而不是 string