首页 > 技术文章 > 解决页面插入HTML代码后错位(HTML代码里的标签不完整导致错位)

lb809663396 2016-09-27 15:43 原文

这个的例子是从数据库读取出来的数据内容包含HTML导致页面错位问题!

解决办法如下:

首先过滤掉会跟JS冲突的字符,C#代码如下:

string htmlc = Model.HtmlContents.Replace("\"", "").Replace("\\", "").Replace("\n", "").Replace("\t", "").Replace("\r", "");
htmlc = Regex.Replace(htmlc, @"\s{2,}", "");

这个htmlc变量经过处理后是要传递到页面里的HTML代码。

把值传递到页面里后,剩下的就交给JS处理吧。

先把传递过来的值放到一个隐藏的IFRAME里面的BODY里,

IFRAME会自动的把值里面的HTML补全,

这个时候再把IFRAME里的BODY包裹的HTML代码获取后放到指定的位置,就OK了

<div id='htmlcontents'></div>
<iframe id='iframeview' style='display:none'></iframe>
<script type='text/javascript'>
   $(function () {
     document.getElementById("iframeview").contentWindow.document.body.innerHTML = "<%=htmlc%>";
     $("#htmlcontents").html($("#iframeview").contents().find("body").html());
   })
</script>

  

推荐阅读