javascript - 当其中有自定义命名空间时,IE9 将 svg 附加到 DOM

标签 javascript jquery html svg internet-explorer-9

我有这个问题,我已经被困了好几天了。我正在尝试将 svg 附加到 DOM。我其中有自定义 namespace ,当它们被添加到 DOM 中时,您尝试获取将它们附加到的父元素的innerHTML 属性,您将获得一些随机 namespace 。这种情况仅发生在 IE9 中。

示例:

$(document).ready(function () {
 var svg = '<svg xmlns="http://www.w3.org/2000/svg" ns:attr="val" />';
 alert($("div").append(svg).html());
});

输出将是:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:NS1="" NS1:a:b="val" />

知道如何解决这个问题吗?我尝试定义 namespace ,但它不再起作用。这是 jsfiddle 链接 http://jsfiddle.net/RwNqk/3/

提前致谢。

最佳答案

首先,您的 JSFiddle 中有一个 HTML 文档(而不是 XHTML)。 HTML 没有自定义命名空间,只有 XML/XHTML 有。

其次,您正在使用 ns命名空间前缀,而无需定义该命名空间是什么。其他浏览器竟然能正常工作真是一个奇迹。

第三,即使你解决了这些问题,你(不幸的是)can't use jQuery to jam elements into the DOM using previously-defined namespace prefixes :

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:foo="hello"><head>
  <title>Using jQuery to add namespaced attribute</title>
</head><body>
  <div><p foo:bar="yes">one</p></div>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript"><![CDATA[
    var xhtml = '<p foo:bar="no">two</p>';
    alert($('div').html());
    try{ $('div').append(xhtml); }
    catch(e){ alert(e);          }
  ]]></script>
</body></html>

第一个警报显示自定义命名空间有效:
<p xmlns="http://www.w3.org/1999/xhtml" foo:bar="yes" xmlns:foo="hello">one</p>

第二个警报显示失败:

[Firefox] "An invalid or illegal string was specified"  code: "12"
[Chrome]  Error: SYNTAX_ERR: DOM Exception 12
[IE9]     DOM EXception: SYNTAX_ERR (12)

这与 IE9 或 SVG 无关。它主要与 jQuery 有关。 (您可以在 IE9 和 FF 中设置 DOM 元素的 .innerHTML,它将按需要工作,但不适用于 Chrome。)

关于javascript - 当其中有自定义命名空间时,IE9 将 svg 附加到 DOM,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11970075/

相关文章:

javascript - Location.Hash 不会在 Chrome 中更新

jQuery - 操作可排序列表中删除的元素

javascript - onchange 函数到输入文本 JQuery 数组

javascript - AngularJS:用破折号格式化 5 或 9 位邮政编码

javascript - 如何将元素 id 转换为已定义的变量

javascript - 具有更灵活许可的 ExtJS 网格替代品?

Javascript 注释练习

jquery - FancyBox 中的“全屏”和 'close' 按钮

jquery - 创建多步骤表单

php - 按钮点击计数器[PHP]