最近项目遇到需求:动态给meta标签赋值。刚开始,我使用了jQuery动态添加标签的方式,如:
var keywords = [[${news.keywords}]];
if([[${news.keywords}]] == null){
$("#headId").append("<meta name='keywords' content='XXXX'/>");
}else{
$("#headId").append("<meta name='keywords' content="+keywords+"/>");
}
var describtion = [[${news.describtion}]];
if([[${news.describtion}]] == null){
$("#headId").append("<meta name='describtion' content='XXXX'/>");
}else{
$("#headId").append("<meta name='describtion' content="+describtion+"/>");
}
结果:在浏览器使用“检查”可以看到效果,但是在“查看网页源码”项找不到对应的meta标签。原因:jQuery是通过浏览器内核来进行解析的,但需求是需要在服务器里边就先将该标签装配好。解决方案:后面我使用了thymeleaf模板,代码修改为:
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title id="title_find" th:attr="content=${news.newTietle}" ></title>
<meta id="keywords" th:attr="content=${news.keywords} "/>
<meta id="describtion" th:attr="content=${news.describtion} "/>
<link rel="stylesheet" href="/front/css/bootstrap.min.css">
<link rel="stylesheet" href="/front/css/module.css">
<link rel="stylesheet" href="/front/css/NewsDetail.css">
<link rel="stylesheet" href="/front/css/lrtk.css">
搞定,收工,mark一下,欢迎各路大神指点。