javascript - 新的聊天窗口

Question

我有一个聊天(到目前为止没有任何设计)

<div id="chatHtml">
    <input type="text" id="input-text-chat" placeholder="Enter Text Chat">
    <div id="chat-container">
        <div id=chatOutput class="chat-output"></div>
    </div>
</div>

现在我有一个按钮，它调用 ja javascript 函数来打开一个新窗口

<button type="button" v-on:click="openChat">open chat</button>

openChat: function() {
    win = top.consoleRef = window.open('', 'myconsole',
        'width=350,height=250' +
        ',menubar=0' +
        ',toolbar=1' +
        ',status=0' +
        ',scrollbars=1' +
        ',resizable=1')
    chat = document.getElementById("chatHtml").innerHTML;
    win.document.write(chat);
}

最后是聊天正在运行的代码

document.getElementById('input-text-chat').onkeyup = function(e) {
    if (e.keyCode != 13) return;
    // removing trailing/leading whitespace
    //   this.value = this.value.replace(/^\s+|\s+$/g, '');
    if (!this.value.length) return
    connection.send(this.value);
    console.log(connection.send);
    console.log(this.value);
    appendDIV(this.value);
    this.value = '';
};
var chatContainer = document.querySelector('.chat-output');

function appendDIV(event) {
    var div = document.createElement('div');
    div.innerHTML = event.data || event;
    chatContainer.insertBefore(div, chatContainer.firstChild);
    div.tabIndex = 0;
    div.focus();
    document.getElementById('input-text-chat').focus();
    win.document.write(chatContainer.innerHTML);
}

<小时/>

我的问题:

聊天无法在新窗口中进行，但可以在“索引窗口”中进行。我对 javascript 完全陌生，我不知道问题是什么。我认为这是因为 ID 或其他东西。有人可以帮助我吗，我可以在新窗口中使用聊天功能吗？谢谢:)

Answer 1

你的新页面的输入还没有事件，所以绑定(bind)它的事件

只需添加这个

openChat: function(){
    win =top.consoleRef=window.open('','myconsole',
    'width=350,height=250'
    +',menubar=0'
    +',toolbar=1'
    +',status=0'
    +',scrollbars=1'
    +',resizable=1')
    chat = document.getElementById("chatHtml").innerHTML;
    win.document.write(chat);

    win.document.getElementById('input-text-chat').onkeyup = function(e) {
        if (e.keyCode != 13) return;
        // removing trailing/leading whitespace
     //   this.value = this.value.replace(/^\s+|\s+$/g, '');
        if (!this.value.length) return
        connection.send(this.value);
        console.log(connection.send);
        console.log(this.value);
        appendDIV(this.value);
        this.value = '';
    };

}

之后

win.document.write(chatContainer.innerHTML);

最好将其命名为该事件以减少代码