在IE8中通过JavaScript添加多个VML元素 [英] Adding multiple VML elements via JavaScript in IE8

问题描述

使用IE 8，我试图通过javascript向我的页面添加两个VML椭圆（A，B）。渲染到父DIV的任何椭圆都会被渲染，但是第二个不是。

Working with IE 8, I am attempting to add two VML ovals (A,B) to my page, through javascript. Whichever oval is appended to the parent DIV is rendered, but I the second is not.

如果我追加孩子（A）然后追加孩子（B），则呈现椭圆A，而不是。
如果我追加孩子（B）然后追加孩子（A），则呈现椭圆形B，A不是。

If I appendChild(A) then appendChild(B), Oval A is rendered, B is not. If I appendChild(B) then appendChild(A), Oval B is rendered, A is not.

document.namespaces.add("v","urn:schemas-microsoft-com:vml");

this.container = Document.getElementById(mydiv);

var grid2 = document.createElement("v:oval");
grid2.style.left=   "300px";
grid2.style.top=    "250px";
grid2.style.width=  "25pt";
grid2.style.height= "75pt";
grid2.style.position="absolute";
grid2.style.behavior="url(#default#VML)";
grid2.style.display="inline-block";
grid2.setAttribute("fillcolor","#FF0000");
grid2.setAttribute("id", "marker2");    

var grid = document.createElement("v:oval");
grid.style.left="100px";
grid.style.top="100px";
grid.style.width="94pt";
grid.style.height="164pt";
grid.style.position="absolute";
grid.style.behavior="url(#default#VML)";
grid.style.display="inline-block";
grid.setAttribute("fillcolor","#0000FF");
grid.setAttribute("id", "marker");

this.container.appendChild(grid2);
this.container.appendChild(grid);

我错过了添加VML的技巧吗？

Am I missing some trick to adding VML?

我在IE 9中尝试过，结果相同。

I have tried it in IE 9, with same results.

由于公司规则，公司内只支持IE，许多用户仍在使用IE8，因此我暂时无法切换HTML5 Canvas。

Due to corporate rules, only IE is supported within the company, and many users are still using IE8, so I cannot switch the HTML5 Canvas at this time.

感谢您的任何建议

推荐答案

我处理过类似的问题，其中添加到IE的第一个VML对象正确呈现，但后续的呈现得太小而无法看到。

I dealt with a similar problem, where the first VML object added to IE rendered properly, but subsequent ones were rendered too small to see.

这篇博客文章有助于确定IE不再支持VML的set / getAttribute：

This blog article was helpful in determining that IE doesn't support set/getAttribute for VML anymore:

http://louisremi.com/2009/03/30/changes-in-vml-for-ie8-or-what-feature-can-the-ie-dev-team-今天为你打破/

事实证明，set / getAttribute不仅不起作用，甚至直接在DOM元素上设置属性（例如grid2.style.left =300px）没有用。

It turns out not only do set/getAttribute not work, but even setting the attributes directly on the DOM element (e.g. grid2.style.left="300px") didn't work.

最终，似乎有用的是将每个元素的所有标记生成为字符串，并通过将其设置为另一个元素的innerHTML将其注入DOM。

Ultimately, what seemed to work was generating all the markup for each element as a string, and injecting it into the DOM by setting it as another element's innerHTML.

var html2 = "<v:oval style=\"left: 300px; top: 250px; width: 25pt; height: 75pt; position: absolute; display: inline-block;\" fillcolor=\"#0000FF\" id=\"marker2\"></v:oval>";
var html = "<v:oval style=\"left: 300px; top: 400px; width: 94pt; height: 164pt; position: absolute; display: inline-block;\" fillcolor=\"#0000FF\" id=\"marker\"></v:oval>";

someNode.innerHTML = html2;
someNode2.innerHTML = html;

我制作了一个虚拟节点，用于托管VML：设置innerHTML，然后将其移动到期望的父母，重复。

I made a dummy node which I used to host the VML: set innerHTML, then move it to the desired parent, repeat.

丑陋，但确实有效！

这篇关于在IE8中通过JavaScript添加多个VML元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！