Question

我正在尝试做下一件事：

getChatListMessageString: function(dateObject, userID, userName, userRole, messageID, messageText, channelID, ip) {
            var rowClass = this.DOMbufferRowClass,
                userClass = this.getRoleClass(userRole),
                colon = ': ';
            if(messageText.indexOf('/action') === 0 || messageText.indexOf('/me') === 0 || messageText.indexOf('/privaction') === 0) {
                userClass += ' action';
                colon = ' ';
            }
            if (messageText.indexOf('/privmsg') === 0 || messageText.indexOf('/privmsgto') === 0 || messageText.indexOf('/privaction') === 0) {
                rowClass += ' private';
            }

            var dateTime = this.settings['dateFormat'] ? '<span class="dateTime">'
                            + this.formatDate(this.settings['dateFormat'], dateObject) + '</span> ' : '';
            return  '<div id="'
                    + this.getMessageDocumentID(messageID)
                    + '" class="'
                    + rowClass
                    + '">'
                    + this.getDeletionLink(messageID, userID, userRole, channelID)
                    + dateTime

                    //start of the code i added

                    + '<a href="http://hostname.x/report_chat.php?usernameR='
                    + userName
                    + '/&useridR='
                    + userID
                    + '">'
                    + '<img src="img/excl.png"></img></a>'

                    // end of the code i added
                    + '<a href="http://www.hostname.x/'
                    + userID
                    + '" target="_blank"'
                    + this.getChatListUserNameTitle(userID, userName, userRole, ip)
                    + ' dir="'
                    + this.baseDirection
                    + '" onclick="ajaxChat.insertText(this.firstChild.nodeValue);">'
                    + userName
                    + '</a>'
                    + colon
                    + this.replaceText(messageText)
                    + '</div>';
        },

如果删除我添加的部分，页面工作正常。当我将其添加回来时，我收到了Aw Snap错误（缓存重新加载 - ＆gt;隐身模式）

我对javascript很新，所以我无法确定我做错了什么。

谢谢！

编辑：无论出于何种原因，AW SNAP ERROR都来自<img>标记。

Answer 1

哎哟！最好的方法是不首先以这种方式构建HTML元素，并使用DOM构建并将它们注入到文档中。

这使代码MUCH更易于阅读和修改，并完全消除了连接问题。

现在，如果您有错误，可以专注于分配给属性的值而不是HTML的语法。

// Create the div element in memeory
var div = document.createElement("div");

// Configure the attributes of that div
div.id = this.getMessageDocumentID(messageID);
div.classList.add(rowClass);

// Now, begin populating the div
div.innerHTML = this.getDeletionLink(messageID, userID, userRole, channelID) + dateTime;

// A new element belongs inside the div. Repeat the process:
var a1 = document.createElement(a);
a1.href = "http://hostname.x/report_chat.php?usernameR=" + userName + "/&useridR=" + userID;

var img = document.createElement("img");
img.src = "img/excl.png";

// Place the image into the anchor
a1.appendChild(img);

// Place the anchor into the div
div.appendChild(a1);

// Another anchor is now needed
var a2 = document.createElement(a);
a2.href = "http://www.hostname.x/" + userID;
a2.target = "_blank";

// It is unclear what the following line is based on the fact that whatever it returns, you have that 
// being inserted where attributes go. It is commented here for that reason.
//this.getChatListUserNameTitle(userID, userName, userRole, ip) + " dir='" + this.baseDirection;

// Set up event handler for the anchor
a2.addEventListener("click", function(){
  ajaxChat.insertText(this.firstChild.nodeValue);
});

// Populate the anchor
a2.innerHTML = userName;

// Insert this anchor into the div
div.appendChild(a2);

// Insert the final contents into the div
div.innerHTML += colon + this.replaceText(messageText);

// Return the final construct
return div;

Answer 2

＆＃13;

//Here a  simple test

var Obj = (function(){
	 return{

     DOMbufferRowClass : 'DOMbufferRowClass',
     getRoleClass : function()
     {
     		return 'roleClass';
     },
     settings : '',
     getMessageDocumentID : function(){
     	return '123';
     },
     getDeletionLink : function(messageID, userID, userRole, channelID) 
     {
     	return 'DeletiongLink'
     },
     replaceText : function()
     {
     
     },
    	getChatListMessageString : function(dateObject, userID, userName, userRole, messageID, messageText, channelID, ip) {
                var rowClass = this.DOMbufferRowClass,
                    userClass = this.getRoleClass(userRole),
                    colon = ': ';
                if(messageText.indexOf('/action') === 0 || messageText.indexOf('/me') === 0 || messageText.indexOf('/privaction') === 0) {
                    userClass += ' action';
                    colon = ' ';
                }
                if (messageText.indexOf('/privmsg') === 0 || messageText.indexOf('/privmsgto') === 0 || messageText.indexOf('/privaction') === 0) {
                    rowClass += ' private';
                }

                var dateTime = this.settings['dateFormat'] ? '<span class="dateTime">'
                                + this.formatDate(this.settings['dateFormat'], dateObject) + '</span> ' : '';
                return  `<div id="${this.getMessageDocumentID(messageID)}" class="${rowClass}">
                         ${this.getDeletionLink(messageID, userID, userRole, channelID)}  ${dateTime}
                         <a href="http://hostname.x/report_chat.php?usernameR='${userName}/&useridR=${userID}">
                         <img src="img/excl.png"/></a><a href="http://www.hostname.x/${userID} target="_blank"
                          this.getChatListUserNameTitle(userID, userName, userRole, ip) dir="{this.baseDirection}
                onclick="ajaxChat.insertText(this.firstChild.nodeValue);">${userName}</a>${colon}${this.replaceText(messageText)}</div>`;
            }     
  };      
})();
console.log(Obj.getChatListMessageString("05102017", '1234',"admin", '456',  'Test','11', '127.0.0.1'));

＆＃13;

我会使用模板文字简化代码并避免所有连接混乱。

getChatListMessageString : function(dateObject, userID, userName, userRole, messageID, messageText, channelID, ip) {
   var rowClass = this.DOMbufferRowClass,
       userClass = this.getRoleClass(userRole),
       colon = ': ';
       if(messageText.indexOf('/action') === 0 || messageText.indexOf('/me') === 0 || messageText.indexOf('/privaction') === 0) {
            userClass += ' action';
                colon = ' ';
       }
       if (messageText.indexOf('/privmsg') === 0 || messageText.indexOf('/privmsgto') === 0 || messageText.indexOf('/privaction') === 0) {
                rowClass += ' private';
       }

      var dateTime = this.settings['dateFormat'] ? '<span class="dateTime">'
                            + this.formatDate(this.settings['dateFormat'], dateObject) + '</span> ' : '';
            return  `<div id="${this.getMessageDocumentID(messageID)}" class="${rowClass}">
                     ${this.getDeletionLink(messageID, userID, userRole, channelID)}  ${dateTime}
                     <a href="http://hostname.x/report_chat.php?usernameR='${userName}/&useridR=${userID}">
                     <img src="img/excl.png"/></a><a href="http://www.hostname.x/${userID} target="_blank"
                      this.getChatListUserNameTitle(userID, userName, userRole, ip) dir="{this.baseDirection}

        onclick="ajaxChat.insertText(this.firstChild.nodeValue);">${userName}</a>${colon}${this.replaceText(messageText)}</div>`;
  }

连接javascript错误 - 可能很容易修复

2 个答案: