zoukankan      html  css  js  c++  java
  • IE Firefox Chrome 对于特殊字符处理的不同记录一个不易察觉的bug

      最近在做一个CatalogueManageMent的新part, 最终项目实现是用微软的Treeview控件加一些模拟的客户端操作实现,不要问我为神马不用Jquery的treeview控件,这应该是遗留问题,前人一直都这么干我也便这么干了.

      实现过程中遇到很多问题,在这里总结一下希望对大家有所帮助.

      因为代码涉及到很多的ajax操作,而微软提供的TreeNode初始化方式只有两个参数Text 和value, 并没有提供一些多余的重载让我们赋值以便在客户端进行操作,

    只能在初始化的时候在text中写上需要用到的值,然而我们的Projest是一个针对多国语言的项目,法语西班牙语之类,而在法语中'这个符号出现的频率比我每天上厕所的次数还要多

    下面先给出动态初始化TreeNode的方法:

    1                     subNode =
    2                         new TreeNode(
    3                             "<span  " + TooltipControl.TooltipHtmlTag + "='~@~@"
    4                             + this.GetReferenceCatalogTooltip(catalogTooltipInformation)
    5                             + "' onclick=\"catalogueNodeClicked('"
    6                             + HttpUtility.HtmlEncode(item.CatalogName.Replace(" ", string.Empty).Replace("'", @"\'"))
    7                             + "','" + WorkspaceId + "','" + item.CatalogId + "')\">" + item.CatalogName.Replace("'", @"&#39;").Replace("\"", @"&quot;") + "</span>"
    8                             + "<span id=\"" + item.CatalogId + "\" style=\"display:none;\">" + this.CatalogueAllData + "</span>",
    9                             item.CatalogId);
    TooltipControl这是我们自己写的通用的Tooltip控件各位看官可以不用关心, 这段代码的实际作用是在TreeNode的Text中增加了一个客户端的
    catalogueNodeClicked事件然后在这个节点下面添加了一个隐藏的Span里面放入了一个客户端需要数据的Json数组,其实思路很简单,代码页能在IE9, Firefox,Chrome下面正常的运行,

    问题出现在了WINXP+IE8下面, 在某些特殊状态下TreeView节点点击之后不会被展开,在开Firebug查看之后发现javascript方法被截断在尝试过各种办法我只能说IE真是个神奇的浏览器.请大家注意下面这行
    item.CatalogName.Replace("'", @"&#39;").Replace("\"", @"&quot;")

    这段代码先前是

    item.CatalogName.Replace("'", @"\'").Replace("\"", @"&quot;")

    用于替换 CatalogName中可能出现的截断Javascript的字符,因为这个text的信息量是在比较大,有个json数组还有一个参数很多很长也可能出现特殊字符的js方法,所以做了encode然后替换了单引号之类的特殊字符,看起来应该运行良好,在我自己的测试中也确实运转良好,甚至在Win7下面的IE8兼容模式中也没有任何问题,但是在WinXp+IE8的环境下代码就是会被截断,因为信息量太大,也不好进行调试,最后在查询资料后发现问题的解决办法:

    结论: IE 不支持单引号(')的实体名称(&amp;apos;)

    在 (x)HTML 中,一些特殊字符应该进行 HTML 实体转义。

    常见的有:&(and)、"(双引号)、'(单引号)、<(小于号)、>(大于号),这些在 (x)HTML 文档内容中应该分别转换成:&amp;&quot;&#39;&lt; 和 &gt;

    但是问题就来了,为什么上面单引号的转义和别的特殊字符不同呢?为什么唯独单引号用的是实体编号(&#39;),而其它的用的是实体名称(&apos;)呢?

    原因就是 IE 浏览器暂时不支持单引号的实体名称,IE 浏览器暂时只支持单引号的实体编号

    这也是 PHP htmlspecialchars 函数把单引号转义成 &#39;,而不是 &apos; 的原因。

    主要是这段内容:

    Reserved Characters in HTML

    Some characters are reserved in HTML and XHTML. For example, you cannot use the greater than or less than signs within your text because the browser could mistake them for markup.

    HTML and XHTML processors must support the five special characters listed in the table below:

    CharacterEntity NumberEntity NameDescription
    " &#34; &quot; quotation mark
    ' &#39; &apos; (does not work in IE) apostrophe 
    & &#38; &amp; ampersand
    < &#60; &lt; less-than
    > &#62; &gt; greater-than

     

  • 相关阅读:
    Vue核心之数据劫持
    Flex 布局教程
    Grid布局
    我们都在深夜,参差不齐地入眠
    一个十分好用的动画工具:Velocity.js
    前端知识点总结——jQuery(下)
    前端知识点总结——jQuery(上)
    虫师Selenium2+Python_2、测试环境搭建
    虫师Selenium2+Python_11、自动化测试项目实战
    虫师Selenium2+Python_12、BDD框架之Lettuce入门
  • 原文地址:https://www.cnblogs.com/nicStudio/p/2670641.html
Copyright © 2011-2022 走看看