Question

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

我的聊天与索引完美配合。检查图像。

旧的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>

图片旧（我使用自举功能获取响应式页面）：

网络最大化

如果我减少或增加浏览器窗口

按下按钮点击新的索引打开聊天，聊天的所有代码我放在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示例。

错误是：

主线程上的同步XMLHttpRequest因不推荐使用它对最终用户的体验产生不利影响。如需更多帮助，检查https://xhr.spec.whatwg.org/。未捕获的TypeError：无法读取属性＆＃39; classList＆＃39;为null 在displayPayload（eval at（jquery.min.js：2），：80：23）在Object.Api.setRequestPayload（eval at（jquery.min.js：2），：52：7） at Object.sendRequest（eval at（jquery.min.js：2），：55：11）在geoSuccess（eval at（jquery.min.js：2），：47：9）displayPayload @ VM901：80 Api.setRequestPayload @ VM901：52 sendRequest @ VM899：55 geoSuccess @ VM900：47 VM901：80 未捕获的TypeError：无法读取属性＆＃39; classList＆＃39;为null 在displayPayload（eval at（jquery.min.js：2），：80：23）

Obs。：旧文件index.ejs是新的chat.ejs，用于在单击按钮时加载窗口内的聊天。

我试着用相同的例子看其他帖子，但没有一个人和我一样尝试

Answer 1

在我将所有.css样式放入我的css存储库的情况下，我在scripts src内添加了index。之后，工作正常。我不需要chat.ejs，我在索引中插入了所有代码，只是在我的存储库{.1}}中使用.css

检查代码：

public/css/app.css

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

1 个答案: