Question

我有一个页面，其中“提交”按钮通过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>

JavaScript preventDefault（）无法在https上运行

0 个答案: