JSP页面样式乱掉:JS编码&解码&HTML转义escape , unescape
2017-09-13 14:31
435 查看
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。相关文章推荐
- Eclipse下支持编写HTML/JS/CSS/JSP页面的自动提示,在<=abcd......就可以。
- html转jsp页面样式发生改变
- 关于html转成jsp页面,样式丢失问题
- html和jsp页面展示 等特殊字符
- JS编码&解码&HTML转义
- JS编码&解码&HTML转义
- jsp,html页面鼠标小手样式控制(要不要小手)
- html页面转向jsp页面后页面样式变化处理方法
- 【jsp+servelet】JSTL <c:out>使用 escapeXml 属性保持 HTML 格式编排
- jsp&html页面知识点集锦
- 转义分为escapeHTML和unescapeHTML,先看两个函数的实现。
- 关于将html页面转成jsp页面之后样式变化的问题
- html页面转成jsp页面之后样式变化的问题解决方法
- 《JSP极简教程》如何在JSP页面输出HTML文本而不被转义
- js escape && unescape 对html编码,反编码
- 关于将html页面转成jsp页面之后样式变化的问题
- 把html做成jsp并抽取其中的css样式和js 样式和js都要求分包
- jsp/html页面中的路径
- ?????????jsp html 影响样式的头部文件
- JSP页面使用EL表达式出现的问题:javax.el.PropertyNotFoundException: Property 'ID' not found on type java.lang.Str