87,989
社区成员
发帖
与我相关
我的任务
分享IE 网页聊天对话框 发送Botton失效
https://download.csdn.net/download/fu415037685/10567518
我参考了这篇文章的源码，大致写出了一个网页。在Chrome和其他浏览器上运行没有没问题。但是在IE11上，输入聊天内容后点击 发送 没有响应，F12反馈，‘发送’函数 sendMessage 未定义。可能是JS没写好。因为有必须用IE的需求，所以请教一下大佬们有什么办法可以解决。
html 如下
JS如下
我参考了这篇文章的源码，大致写出了一个网页。在Chrome和其他浏览器上运行没有没问题。但是在IE11上，输入聊天内容后点击 发送 没有响应，F12反馈，‘发送’函数 sendMessage 未定义。可能是JS没写好。因为有必须用IE的需求，所以请教一下大佬们有什么办法可以解决。
html 如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小助手</title>
<link rel="stylesheet" href="css/index.css">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body style="overflow: hidden;max-width: 50%;margin: 0 auto;background: #5b515133;" onkeydown="onKeyDown(document.getElementById('search').value)" >
<div id="container">
<div class="header">
<div class="logo logo-text">小助手</div>
<div id="contact-btn" class="func-btn" style="display: block">
</div>
</div>
<div class="main">
<div class="lside">
<div class="chat-box" >
<div class="jspScrollable" style="overflow: auto" tabindex="0">
<div class="jspContainer">
<div class="jspPane" id="jspPane" style="width: 100%;">
<div class="rctCtn chtCtn lft" >
<div class="chtMsg chtMsg-greeting">
<div id="talk">
<div class="robot" style="margin-top: 20px;">
<div class="chat">
<div class="robot-icon" style="width:46px;height: 46px;"></div>
<div class="robot-response">
<div class="robot-chat">
你好，有什么需要吗？
</div>
</div>
<span class="robot-talk-cor"></span>
</div>
</div>
<!--<div class="me">-->
<!--<div class="i-talk">-->
<!--<div class="me-chat">我</div>-->
<!--<div class="content">测试一下</div>-->
<!--<span class="i-talk-cor"></span>-->
<!--</div>-->
<!--</div>-->
</div>
</div>
<div>
<a id="msg_end" name="1" href="#1"> </a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--<div class="send-box">-->
<!--<div class="input-box" autocomplate="off" >-->
<!--<input type="text" id="input" class="input ui-autocomplate-input" placeholder="主人，您还想问些什么？" autocomplete="off" autofocus>-->
<!--</div>-->
<!--<div id="send-btn" class="send-btn">-->
<!--<span onclick="sendMessage(document.getElementById('input').value)">发送</span>-->
<!--</div>-->
<!--</div>-->
<div class="ask-area">
<div class="input-area">
<ul class="input-tip">
<textarea id="search" autocomplete="off" disableautocomplete placeholder="主人，您有什么想问的吗？" autofocus></textarea>
</ul>
</div>
<button class="send-btn" onclick="sendMessage(document.getElementById('search').value)">
发送
</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
JS如下
var xmlHttp;
//键盘监听
function onKeyDown(str){
if(window.event.keyCode == "13" && event.ctrlKey ){
document.getElementById("search").value += "\n";
}else if(window.event.keyCode == "13"){
event.preventDefault();
sendMessage(str);
}
}
//发送一个消息
function sendMessage(str) {
if(str==""){
return
}
//添加信息
document.getElementById('talk').innerHTML += `<div class="me" style="clear: both">
<div class="i-talk">
<div class="me-chat">我</div>
<div class="content">${str}</div>
<span class="i-talk-cor"></span>
</div>
</div>`
//清空输入框
document.getElementById('search').value = '';
xmlHttp = GetXmlHttpObject()
if (xmlHttp == null) {
alert("恭喜您，您的浏览器不支持ajax！");
return;
}
var url = "http://www.tuling123.com/openapi/api?key=c1becdcde3c54ef6b9e7cb7173c6dfed";
url = url + "&info=" + str;
url = url + "&userid=1234";
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
//接收到一个消息
function stateChanged(){
if(xmlHttp.readyState==4){
var msg=eval('('+xmlHttp.responseText+')');
document.getElementById('talk').innerHTML += `<div class="robot" style="clear: both">
<div class="chat">
<div class="robot-icon" style="width:46px;height: 46px;"></div>
<div class="robot-response">
<div class="robot-chat">
${msg.text}
</div>
</div>
<span class="robot-talk-cor"></span>
</div>
</div>`;
}
document.getElementById("msg_end").click();
document.getElementById('search').focus();
}
function GetXmlHttpObject(){
var xmlHttp=null;
try{
xmlHttp=new XMLHttpRequest();
}catch(e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
$(".hot-item").live("click",function(){
var aa=$(this).attr("id");
var testname=document.getElementById(aa).innerHTML;
document.getElementById('talk').innerHTML += `<div class="me" style="clear: both">
<div class="i-talk">
<div class="me-chat">我</div>
<div class="content">${testname}</div>
<span class="i-talk-cor"></span>
</div>
</div>`
xmlHttp = GetXmlHttpObject()
if (xmlHttp == null) {
alert("恭喜您，您的浏览器不支持ajax！");
return;
}
var url = "http://www.tuling123.com/openapi/api?key=eb1b5387a6ee4d8091fb96735631a632";
url = url + "&info=" + testname;
url = url + "&userid=1234";
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
document.getElementById("msg_end").click();
})
...全文
请发表友善的回复…
发表回复
麦草CMS 2019-03-14
- 打赏
- 举报
你用了ie不支持的反引号``
