Javascript - 如何将索引聊天转换为聊天窗口

标签 javascript jquery chat

实际上我有一些聊天，我想把它放在一个窗口内，我找到了一个例子，但没有在窗口内加载聊天。

我的聊天仅使用索引就可以完美运行。检查图像。

旧的index.ejs代码(只是聊天):

<html>
<head>
          <script src="jquery-3.1.1.js"></script>
          <script src="app.js"></script>
          <base href="/">
          <title>XXXXXXXXXXXXXXXX</title>
          <meta ------ />
          <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
          <link rel="stylesheet" href="css/app.css">
        </head>
        <body>
          <div id="view-change-button" class="button" onclick="Payloadxxxxxxx.togglePanel(event, this)">
            <img class="option full" src="../img/Chat Button.png">
            <img class="option not-full" src="../img/Code Button.png">
          </div>
          <div id="contentParent" class="responsive-columns-wrapper">
            <div id="chat-column-holder" class="responsive-column content-column">
              <div class="chat-column">
                <div id="scrollingChat"></div>
                <label for="textInput" class="inputOutline">
                  <input id="textInput" class="input responsive-column"
                    placeholder="Type something" type="text"
                    onkeydown="xxxxxxxxxxxxxxxxPanel.inputKeyDown(event, this)">
                </label>
              </div>
            </div>
            <div id="payload-column" class="fixed-column content-column">
              <div id="payload-initial-message">
                xxxxxxxxxxxxxxxxxxxxxxxxxxxxxOtherDescription.
              </div>
              <div id="payload-request" class="payload"></div>
              <div id="payload-response" class="payload"></div>
            </div>
          </div>

  <script src="js/xxxxx.js"></script>
  <script src="js/xxxxxxxx.js"></script>
  <script src="js/xxxxxxxxxx.js"></script>
  <script src="js/xxxxxxxxxx.js"></script>
  <script src="js/xxxxxxxxx.js"></script>
</body>
</html>

旧图像(我使用 bootstrap 作为响应式页面):

网页最大化

enter image description here

如果我减小或增大浏览器窗口

enter image description here

新索引，单击按钮即可打开聊天，我将所有聊天代码放入chat.ejs中:

    <!DOCTYPE html>
 <html>
 <head>
  <base href="/">
  <title>Web Chat - ITSM</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta property="og:image" content="conversation.svg" />
  <meta property="og:title" content="Conversation Chat Simple" />
  <meta property="og:description" content="Sample application that shows how to use the Conversation API to identify user intents" />
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="css/app.css">
 <meta charset="UTF-8">
 <title>Title of the document</title>
  <script   
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">  
  </script>
 <script type="text/javascript">
function open_chatbox() {
  $('#chat').fadeOut(500);
  $('#chatBox').fadeIn(1000);
 }
function closeChat() {
  $('#chatBox').fadeOut(500);
  $('#chat').fadeIn(1000);
 }
 </script>
     <style>
     #chat
 {
 position:absolute;
 width:200px;
 height:auto;
 padding:10px;
 background:#088A68;
 color:#EDEDED;
 text-align:center;
 font-family:Cambria;
 font-size:20px;
 bottom:0px;
 right:15px;
 cursor:pointer;
 }
 #chatBox
 {
 display:none;
 position:absolute;
 width:200px;
 height:300px;
 padding:10px;
 background:#EDEDED;
 color:#FF7700;
 text-align:center;
 font-family:Cambria;
 font-size:20px;
 bottom:0px;
 right:15px;
 cursor:pointer;
 }
 #close
 {
 position:absolute;
 width:15px;
 height:15px;
 padding:6px 5px 10px 5px;
 text-align:center;
 background:rgba(0,0,0,0.8);
 color:#FF7700;
 font-family:Cambria;
 right:0px;top:0px;
 } </style>

 </head>

 <body>
 <div id="chat" onClick="open_chatbox();"> Chat Now </div>
 <div id="chatBox"><div onclick="closeChat()" id="close">X</div> <br><br><div id="view-change-button" class="button" onclick="PayloadPanel.togglePanel(event, this)">
    <img class="option full" src="../img/Chat Button.png">
    <img class="option not-full" src="../img/Code Button.png">
  </div>
  <div id="contentParent" class="responsive-columns-wrapper">
    <div id="chat-column-holder" class="responsive-column content-column">
      <div class="chat-column">
        <div id="scrollingChat"></div>
        <label for="textInput" class="inputOutline">
          <input id="textInput" class="input responsive-column"
            placeholder="Type something" type="text"
            onkeydown="ConversationPanel.inputKeyDown(event, this)">
        </label>
      </div>
    </div>

    </div>
  </div>
  <script src="js/common.js"></script>
  <script src="js/api.js"></script> 
  <script src="js/conversation.js"></script>
  <script src="js/global.js"></script>
 </body>

 </html>

我明白了that举个例子。

错误是:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/. Uncaught TypeError: Cannot read property 'classList' of null at displayPayload (eval at (jquery.min.js:2), :80:23) at Object.Api.setRequestPayload (eval at (jquery.min.js:2), :52:7) at Object.sendRequest (eval at (jquery.min.js:2), :55:11) at geoSuccess (eval at (jquery.min.js:2), :47:9) displayPayload @ VM901:80 Api.setRequestPayload @ VM901:52 sendRequest @ VM899:55 geoSuccess @ VM900:47 VM901:80 Uncaught TypeError: Cannot read property 'classList' of null at displayPayload (eval at (jquery.min.js:2), :80:23)

观察:如果单击按钮，旧文件index.ejs是新的chat.ejs，用于在窗口内加载聊天内容。

我尝试查看其他具有相同示例的帖子，但他们都没有尝试与我相同

最佳答案

在这种情况下，我将所有 .css 样式放入我的 css 存储库中，并在 index 中添加了 scripts src 。之后，工作正常。我不需要 chat.ejs，我将所有代码插入索引中，仅使用存储库中的 .css public/css/app.css

检查代码:

<!DOCTYPE html>
 <html>
 <head>
  <base href="/">
  <title>Web Chat - ITSM</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta property="og:image" content="conversation.svg" />
  <meta property="og:title" content="Conversation Chat Simple" />
  <meta property="og:description" content="Sample application that shows how to use the Conversation API to identify user intents" />
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="css/app.css">
 <meta charset="UTF-8">
 <title>Title of the document</title>
  <script   
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">  
  </script>
 <script type="text/javascript">
function open_chatbox() {
  $('#chat').fadeOut(500);
  $('#chatBox').fadeIn(1000);
 }
function closeChat() {
  $('#chatBox').fadeOut(500);
  $('#chat').fadeIn(1000);
 }
 </script>

 </head>

 <body>
 <div id="chat" onClick="open_chatbox();"> Chat Now </div>
 <div id="chatBox"><div onclick="closeChat()" id="close">X</div> <br><br><div id="view-change-button" class="button" onclick="PayloadPanel.togglePanel(event, this)">
    <img class="option full" src="../img/Chat Button.png">
    <img class="option not-full" src="../img/Code Button.png">
  </div>
  <div id="contentParent" class="responsive-columns-wrapper">
    <div id="chat-column-holder" class="responsive-column content-column">
      <div class="chat-column">
        <div id="scrollingChat"></div>
        <label for="textInput" class="inputOutline">
          <input id="textInput" class="input responsive-column"
            placeholder="Digite algo" type="text"
            onkeydown="ConversationPanel.inputKeyDown(event, this)">
        </label>
      </div>
    </div>

    </div>
  </div>
  <script src="js/common.js"></script>
  <script src="js/api.js"></script> 
  <script src="js/conversation.js"></script>
  <script src="js/global.js"></script>
 </body>

 </html>

关于Javascript - 如何将索引聊天转换为聊天窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42249930/

上一篇：javascript - Twig 模板无法识别 Javascript

下一篇：javascript - 检查表格的单元格是否具有某种颜色

相关文章：

javascript - AngularJS 文件拖放指令

javascript - 可拖动父级但保持子级可滚动

javascript - 输入变化更新价格div

android - 如何在android中创建聊天应用程序？

java - 黑莓聊天实现

javascript - 背景不会显示和选项卡不透明度

javascript - 如何让元素触发一个接一个地出现，间隔很小？

javascript - 如何根据选择标签的选定选项的值向变量分配新值，检索并使用变量的新值？

select - Golang - 使用两个 Reader 返回行作为 select 语句

javascript - 在选择中渲染巨大的列表

©2024 IT工具网  联系我们