13.14 SpringBoot集成JSP模板引擎:JSP页面样式乱掉
来源:互联网 发布:联想有windows系统平板 编辑:程序博客网 时间:2024/06/06 09:47
13.14 SpringBoot集成JSP模板引擎:JSP页面样式乱掉
关键词:JS编码&解码&HTML转义escape , unescape
Blog功能模块,显示文章详情,文章内容中有jsp代码,页面乱掉。如下图所示
原因分析
在如下的HTML/JSP源代码中,有特殊字符(比如说,html标签,</textarea>)
<textarea>HTML/JSP源代码</textarea>
导致页面样式乱。
解决方案
对“HTML/JSP源代码”这段文本进行escape编码。在js中再进行解码。
jsp页面中对文本的输出进行escape编码,escapeXml="true":
<%--escapeXml:是否转换特殊字符--%> <textarea id="blogContent" style="display: none"><c:out value='${blog.content}' escapeXml="true"></c:out></textarea>
在js中对编码后的文本作解码unescape处理:
/** * Created by jack on 2017/3/29. */define(function (require) { "use strict"; require('meditor'); $(function () { var parser = new Mditor.Parser(); // var blogContent = document.getElementById('blogContent').innerHTML;//这个遇到<>等特殊字符会被转译 var blogContent = document.getElementById('blogContent').value; //直接取原本的字符串。不会被转译,默认html页面中textarea区域text需要escape编码 blogContent = unescape(blogContent);//unescape解码 var html = parser.parse(blogContent); $('#rest-blog-body').append(html); hljs.initHighlightingOnLoad(); //源码高亮 $('pre code').each(function(i, block) { hljs.highlightBlock(block); }); //编辑文章 $('#goEditBlog').on('click',function () { var blogId = $('#blogId').val(); location.href = 'goEditBlog?id=' + blogId; }); });});
测试验证
验证OK。
工程源码:https://github.com/Jason-Chen-2017/restfeel/tree/restfeel_jsp_escape_unescape_2017.5.7
阅读全文
0 0
- 13.14 SpringBoot集成JSP模板引擎:JSP页面样式乱掉
- SpringBoot集成jsp
- JSP页面样式乱掉:JS编码&解码&HTML转义escape , unescape
- springboot返回jsp页面
- springboot访问jsp页面
- springboot访问jsp页面
- springboot支持jsp页面
- springmvc集成jsp和freemark两个模板引擎
- springboot之集成jsp(springMVC)
- springboot集成jsp,可以打包
- 在Springboot中集成jsp
- SpringBoot入门-11(springboot配置jsp模板)
- SPringBoot 中 使用JSP页面
- jsp与模板引擎性能
- springboot实战之整合jsp模版引擎
- jsp页面弹出div样式
- jsp页面引入css样式
- jsp页面:改变css样式
- 13.12 Spring Boot集成Security中遇到的问题
- 13.13 java.util.ConcurrentModificationException
- mongodb 中的like 怎么使用
- hadoop实战随笔_0721
- JSP页面样式乱掉:JS编码&解码&HTML转义escape , unescape
- 13.14 SpringBoot集成JSP模板引擎:JSP页面样式乱掉
- 简单的unity 客户端与服务端互相发送消息
- 浅谈android hook技术
- Libpcap库编程指南--网卡高级信息获取
- 在非Activity中使用startActivity:Calling startActivity() from outside of an Activity context requires the FLAG_ACTIVITY_NEW_TASK flag
- OpenCV学习笔记(1)
- android 在一个应用中启动另一个应用
- frida hook重载函数的几种写法
- Frida hook带handler的method