Question

我在网站的前端定义了一个用于聊天的弹出窗口。这是我直接将源代码用于聊天弹出窗口https://www.w3schools.com/howto/howto_js_popup_chat.asp的链接。

  function openForm() {
      document.getElementById("myForm").style.display = "block";
    }
    
    function closeForm() {
      document.getElementById("myForm").style.display = "none";
    }

<!--This is the html of chat popup-->

    <div class="chat-popup" id="myForm">
      <form action="" class="form-container">
        <h1>Chat</h1>
    
        <label for="msg"><b>Message</b></label>
        <textarea placeholder="Type message.." name="msg" required><textarea>
    
        <button type="submit" class="btn">Send</button>
        <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
       
      </form>
     </div>

我已将该弹出窗口的html和js代码粘贴到index.html中，一旦满足某些条件，我便触发显示此聊天弹出窗口：

if(some_condition)
 {
   $(".chot-popup").show();
 }

但是问题是，一旦我访问网站的任何其他页面，弹出窗口就会消失。我希望弹出窗口留在那里，更改页面对弹出窗口没有影响。否则，如果弹出窗口在更改页面后消失，如何继续聊天？

PS：我将使用Django频道及其websockets功能实现此聊天功能

Answer 1

设置您的localStorage并使其处于if条件

 function openForm() {
      localStorage.setItem("chatVisible", "True");
      document.getElementById("myForm").style.display = "block";
    }

    function closeForm() {
      localStorage.setItem("chatVisible", "False");
      document.getElementById("myForm").style.display = "none";
    }

在页面加载中使用localStorage.getitem

var chat = localStorage.getItem("chatVisible");
if(chat == "True")
 {
   $(".chot-popup").show();
 }
 else{
   $(".chot-popup").hide();
 }

Answer 2

我确实从您的教程中复制了聊天弹出窗口样式：https://www.w3schools.com/howto/howto_js_popup_chat.asp

我要做的是添加一个localStorage以在每个页面中签入聊天框是否打开，然后以localStorage值的功能显示它。

localStorage的文档：https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

您还可以使用cookie，这是它的文档：https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

function openForm() {
  //localStorage.setItem("isChatOpen", true);
  document.getElementById("myForm").style.display = "block";
}

function closeForm() {
  //localStorage.setItem("isChatOpen", false);
  document.getElementById("myForm").style.display = "none";
}

/*if(localStorage.getItem("isChatOpen") === true){
   document.getElementById("myForm").style.display = "block";
} else {
   document.getElementById("myForm").style.display = "none";
}*/

/* Button used to open the chat form - fixed at the bottom of the page */
.open-button {
  background-color: #555;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 28px;
  width: 280px;
}

/* The popup chat - hidden by default */
.chat-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  max-width: 300px;
  padding: 10px;
  background-color: white;
}

/* Full-width textarea */
.form-container textarea {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
  resize: none;
  min-height: 200px;
}

/* When the textarea gets focus, do something */
.form-container textarea:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/send button */
.form-container .btn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}

<button class="open-button" onclick="openForm()">Chat</button>

<div class="chat-popup" id="myForm">
  <form action="/action_page.php" class="form-container">
    <h1>Chat</h1>

    <label for="msg"><b>Message</b></label>
    <textarea placeholder="Type message.." name="msg" required></textarea>

    <button type="submit" class="btn">Send</button>
    <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
  </form>
</div>

只需删除我的小提琴中的注释，localStorage不适用于沙箱。

在访问网站的不同页面时如何保持聊天弹出窗口打开？

2 个答案: