На самом деле у меня есть чат, и я хочу поместить его в окно, я нашел пример, но не загружал чат внутри окна.Javascript - Как преобразовать чат в чате в окно чата
Мой чат отлично работает с индексом. Проверьте изображения.
Старый 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>
Image старого (я использовать загрузчик для отзывчивой страницы):
Web максимально
Если я уменьшить или увеличить окно браузера
И новый индекс с помощью кнопки мыши для открытого чата, то весь код чата я положил внутри 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)
Obs .: Старые index.ejs файл является новым chat.ejs для загрузки чата внутри окна, если нажать на кнопку.
Я стараюсь видеть другую должность с таким же примером, но ни один из них не пытаются так же, как мне