Javascript предотвращает дефолт () не работает через HTTPS - PullRequest
Новая
       13

Javascript предотвращает дефолт () не работает через HTTPS

0 голосов
/ 16 февраля 2019

У меня есть страница, где кнопка отправки передает текст через веб-сокеты, а затем данные возвращаются и отображаются на странице.Я использую protectDefault (), чтобы перехватить событие для кнопки отправки, чтобы страница не обновлялась при нажатии.Это работает нормально по http, но по какой-то причине, когда я загружаю сайт по https, нажатие кнопки submit в любом случае перезагружает страницу, разрушая все.Это мешает мне использовать безопасные веб-сокеты для моего приложения, что является проблемой, так как пароли необходимо передавать через страницу для входа в службу.Хорошие полчаса поиска не выявили, почему это может иметь место.

Вот код, о котором идет речь;то, что я считаю соответствующей частью, находится в разделе <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>
...