我有一个页面，其中“提交”按钮通过websocket传输文本，然后返回数据并显示在页面上。我使用preventDefault（）捕获提交按钮的事件，以便在按下页面时不会刷新页面。这在http上可以正常工作，但是由于某些原因，当我通过https加载网站时，无论如何按Submit都会重新加载页面，从而破坏了一切。这使我无法为我的应用程序使用安全的websocket，这是一个问题，因为需要通过页面传输密码才能登录服务。一个半小时的搜索还没有揭示为什么会这样。
这里是有问题的代码；我认为相关的部分在<script>部分，尤其是在form[0].addEventListener的范围之内。
<!DOCTYPE html>
<html style="height: 98%;">
<head>
<title>Dennis MUD</title>
<meta charset="UTF-8">
<style>
body {
background-color: #303030;
height: 100%;
font-family: monospace;
}
a:link, a:visited {
color: #050530;
}
a:hover, a:link:hover, a:visited:hover {
color: #f33;
}
#chat_box {
text-align: left;
margin: auto;
margin-top: 10px;
margin-bottom: 25px;
padding: 5px;
background-color: #484848;
height: 80%;
width: 800px;
border: 1px solid #301010;
overflow: auto;
}
#container {
height: 100%;
text-align: center;
}
#input {
background-color: #484848;
border: 1px solid #301010;
width: 400px;
}
</style>
</head>
<body>
<div id="container">
<div id="supported"></div>
<div id="chat_box">Welcome to the Dennis MUD public test instance, running <a href="https://github.com/seisatsu/Dennis">Dennis</a>.<br/>
This is experimental software. If something goes wrong, try refreshing the page.<br/>
<br/>
In this game, you use in-game commands to create the content. All content is user-created.<br/>
<br/>
To get started, type "register username password", substituting the username and password you want to use.<br/>
Then type "login username password" with the username and password you chose to log in.<br/>
<br/>
Important commands for the casual player include "look", "go", "say", "action", and "chat".<br/>
Read the help pages for the other commands listed by "help" to get started making content.<br/>
<br/>
Using the "help" command by itself will list command categories.<br/>
Using "help" on a category will list the commands in that category.<br/>
For example, "help exploration" will list commands related to exploration.<br/>
You can also use help on a particular command to see a manual entry for that command.<br/>
For example, "help make item" will show the manual entry for the "make item" command.<br/>
<br/>
Please enjoy your stay!<br/>
<br/>
</div>
<form class="console">
<input id="input" autofocus="autofocus"/>
<input type="submit" value="Send Command"/>
</form>
<br/>
</div>
<script type="text/javascript">
var host = "dennis.seisat.su";
var port = 37380;
var secure = false;
if(window.WebSocket){
window.addEventListener("load", function() {
if(secure)
var mySocket = new WebSocket("wss://"+host+":"+port+"/ws");
else
var mySocket = new WebSocket("ws://"+host+":"+port+"/ws");
mySocket.onmessage = function (event) {
var output = document.getElementById("chat_box");
output.innerHTML = output.innerHTML + event.data + '<br/><br/>'
output.scrollTop = output.scrollHeight;
};
var form = document.getElementsByClassName("console");
var input = document.getElementById("input");
form[0].addEventListener("submit", function (e) {
input_text = input.value;
input.value = "";
mySocket.send(input_text);
e.preventDefault();
})
});
}
else{
document.getElementById('supported').innerHTML = "Error: WebSockets are NOT supported in current browser"
document.getElementsByClassName('console')[0].style.visibility = 'hidden'
}
</script>
</body>
</html>