前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >13.14 SpringBoot集成JSP模板引擎:JSP页面样式乱掉13.14 SpringBoot集成JSP模板引擎:JSP页面样式乱掉原因分析解决方案测试验证

13.14 SpringBoot集成JSP模板引擎:JSP页面样式乱掉13.14 SpringBoot集成JSP模板引擎:JSP页面样式乱掉原因分析解决方案测试验证

作者头像
一个会写诗的程序员
发布2018-08-20 09:36:11
3.1K0
发布2018-08-20 09:36:11
举报

13.14 SpringBoot集成JSP模板引擎:JSP页面样式乱掉

关键词:JS编码&解码&HTML转义escape , unescape

Blog功能模块,显示文章详情,文章内容中有jsp代码,页面乱掉。如下图所示

原因分析

在如下的HTML/JSP源代码中,有特殊字符(比如说,html标签,</textarea>)

代码语言:javascript
复制
<textarea>HTML/JSP源代码</textarea>

导致页面样式乱。

解决方案

对“HTML/JSP源代码”这段文本进行escape编码。在js中再进行解码。

jsp页面中对文本的输出进行escape编码,escapeXml="true":

代码语言:javascript
复制
<%--escapeXml:是否转换特殊字符--%>
        <textarea id="blogContent" style="display: none"><c:out value='${blog.content}' escapeXml="true"></c:out></textarea>

在js中对编码后的文本作解码unescape处理:

代码语言:javascript
复制
/**
 * 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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.05.07 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 13.14 SpringBoot集成JSP模板引擎:JSP页面样式乱掉
  • 原因分析
  • 解决方案
  • 测试验证
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档