首页 > 网站 > WEB开发 > 正文

13-关于HTML编码

2024-04-27 15:07:36
字体:
来源:转载
供稿:网友
 1 <!DOCTYPE html> 2 <html> 3   <head> 4     <META http-equiv=Content-Type content="text/html; charset=utf-8"> 5     <title>关于HTML编码 - by 杨元</title> 6   </head> 7   <body> 8     <h1>关于HTML编码</h1> 9     <!--基础html框架-->10     <table>11       <thead>12         <tr>13           <th>姓名</th>14           <th>性别</th>15           <th>年龄</th>16           <th>个人主页</th>17         </tr>18       </thead>19       <tbody id="tableList">20         21       </tbody>22     </table>23     24     <!--插件引用-->25     <script type="text/javascript" src="script/jquery.js"></script>26     <script type="text/Javascript" src="script/handlebars-1.0.0.beta.6.js"></script>27     28     <!--Handlebars.js模版-->29     <!--Handlebars.js模版放在script标签中,保留了html原有层次结构,模版中要写一些操作语句-->30     <!--id可以用来唯一确定一个模版,type是模版固定的写法-->31     <script id="table-template" type="text/x-handlebars-template">32       {{#each student}}33         <tr>34           <td>{{name}}</td>35           <td>{{sex}}</td>36           <td>{{age}}</td>37           {{#compare age 20}}38             <td>{{homePage}}</td>39           {{else}}40             <td>{{{homePage}}}</td>41           {{/compare}}42         </tr> 43       {{/each}}44     </script>45     46     <!--进行数据处理、html构造-->47     <script type="text/javascript">48       $(document).ready(function() {49         //模拟的json对象50         var data = {51                     "student": [52                         {53                             "name": "张三",54                             "sex": "0",55                             "age": 18,56                             "homePage":"<a href='javascript:void(0);'>张三的个人主页</a>"57                         },58                         {59                             "name": "李四",60                             "sex": "0",61                             "age": 22,62                             "homePage":"<a href='javascript:void(0);'>李四的个人主页</a>"63                         },64                         {65                             "name": "妞妞",66                             "sex": "1",67                             "age": 19,68                             "homePage":"<a href='javascript:void(0);'>妞妞的个人主页</a>"69                         }70                     ]71                 };72         73         //注册一个Handlebars模版,通过id找到某一个模版,获取模版的html框架74         //$("#table-template").html()是jquery的语法,不懂的童鞋请恶补。。。75         var myTemplate = Handlebars.compile($("#table-template").html());76         77         //注册一个比较数字大小的Helper,有options参数,块级Helper78         Handlebars.registerHelper("compare",function(v1,v2,options){79           //判断v1是否比v2大80           if(v1>v2){81             //继续执行82             return options.fn(this);83           }else{84             //执行else部分85             return options.inverse(this);86           }87         });88         89         //将json对象用刚刚注册的Handlebars模版封装,得到最终的html,插入到基础table中。90         $('#tableList').html(myTemplate(data));91       });92     </script>93   </body>94 </html>复制代码

 

 

     通过{{}}取出来的内容,都会经过编码,也就是说,如果取出的内容中包含html标签,会被转码成纯文本,不会被当成html解析,实际上就是做了类似这样的操作:把<用&lt;替代。

     这样做是很好的,既可以显示html代码,又可以避免xss注入。这个功能在做代码展示的时候是非常有用的。

     但是有时候我们可能需要解析html,不要转码,很简单,把{{}}换成{{{}}}就可以啦。

     本例中,年龄大于20的童鞋个人主页被编码,直接展示出来;而年龄小于20的童鞋,个人主页被当成html解析,显示的是一个超链接。

 

 

 

作者:杨元欢迎任何形式的转载,但请务必注明出处。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表