新聊天窗口

时间:2016-09-28 07:58:15

标签: javascript html

我聊天了(直到现在没有任何设计)

<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,我不知道这是什么问题。 我是因为身份证或某事而罢了。 某人可以帮助我,我可以在新窗口中使用聊天吗? 谢谢:))

1 个答案:

答案 0 :(得分:0)

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

只需添加此

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

如果你将该事件命名为减少代码

,也会更好