新的聊天窗口

New Chat window

本文关键字：窗口 聊天      更新时间：2023-09-26

我有一个聊天(没有任何设计到现在)

<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>

现在我有一个按钮，它调用一个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和我不知道什么问题。我想是因为身份证之类的原因。有人能帮我用一下新窗口里的聊天功能吗?谢谢:)

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

就加上这个

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);

最好在事件后面加上一个名字来减少代码

相关文章：