以下是代码:
var user_id = escape(id) var txt = '<div class="chut">'+ '<div class="log" id="chut_'+user_id+'"></div>'+ '<textarea id="chut_'+user_id+'_msg"></textarea>'+ '<label for="chut_'+user_id+'_to">To:</label>'+ '<input type="text" id="chut_'+user_id+'_to" value='+user_id+' readonly="readonly" />'+ '<input type="submit" id="chut_'+user_id+'_send" value="Message"/>'+ '</div>';
逃避id的最好办法是避免上述任何一个问题?正如你所看到的,现在我正在使用内置的escape()函数,但我不知道这应该与其他替代方法进行比较。我主要用于在输入文本节点之前进行消毒,而不是id本身。
解决方法
如果你想要一个HTML编码器,你必须自己写,因为JavaScript不给你一个。例如:
function encodeHTML(s) { return s.replace(/&/g,'&').replace(/</g,'<').replace(/"/g,'"'); }
然而,尽管这足以将你的user_id放在像输入值这样的地方,但是对于id来说还不够,因为ID只能使用有限的字符选择。 (和%不在其中,所以escape()或甚至encodeURIComponent()不是很好。)
您可以创建自己的编码方案,将任何字符放在ID中,例如:
function encodeID(s) { if (s==='') return '_'; return s.replace(/[^a-zA-Z0-9.-]/g,function(match) { return '_'+match[0].charCodeAt(0).toString(16)+'_'; }); }
但是如果同一个user_id发生两次,您仍然有问题。说实话,扔在HTML字符串的整个事情通常是一个坏主意。使用DOM方法,并保留对每个元素的JavaScript引用,所以您不必继续调用getElementById,或担心如何将任意字符串插入到ID中。
例如。:
function addChut(user_id) { var log= document.createElement('div'); log.className= 'log'; var textarea= document.createElement('textarea'); var input= document.createElement('input'); input.value= user_id; input.readonly= True; var button= document.createElement('input'); button.type= 'button'; button.value= 'Message'; var chut= document.createElement('div'); chut.className= 'chut'; chut.appendChild(log); chut.appendChild(textarea); chut.appendChild(input); chut.appendChild(button); document.getElementById('chuts').appendChild(chut); button.onclick= function() { alert('Send '+textarea.value+' to '+user_id); }; return chut; }
您也可以使用方便的功能或JS框架来减少创建集追加调用的长度。
ETA:
I’m using jQuery at the moment as a framework
好的,然后考虑jQuery 1.4创建快捷方式,例如:
var log= $('<div>',{className: 'log'}); var input= $('<input>',{readOnly: true,val: user_id}); ...
The problem I have right now is that I use JSONP to add elements and events to a page,and so I can not know whether the elements already exist or not before showing a message.
您可以在JavaScript中查找user_id到元素节点(或包装对象),以将该信息保存在DOM本身中,其中可以进入id的字符受到限制。
var chut_lookup= {}; ... function getChut(user_id) { var key= '_map_'+user_id; if (key in chut_lookup) return chut_lookup[key]; return chut_lookup[key]= addChut(user_id); }
(_map_前缀是因为JavaScript对象不能像任意字符串的映射一样工作,空字符串和IE中的一些Object成员名字混淆起来)。