Добавление нескольких элементов VML через JavaScript в IE8 - PullRequest
Новая
       41

Добавление нескольких элементов VML через JavaScript в IE8

3 голосов
/ 06 декабря 2011

Работая с IE 8, я пытаюсь добавить два овала VML (A, B) на мою страницу через JavaScript.Какой бы овал не был добавлен к родительскому DIV, он отображается, а я - нет.

Если я добавляю Child (A), то appendChild (B), Oval A отображается, B - нет.Если я добавляю Child (B), то appendChild (A), отображается Oval B, а A нет. 

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?

Я пробовал его вIE 9, с такими же результатами.

Из-за корпоративных правил в компании поддерживается только IE, и многие пользователи все еще используют IE8, поэтому в настоящее время я не могу переключить HTML5-холст.

Спасибо за любые предложения

Ответы [ 2 ]

3 голосов
/ 03 октября 2012

Я имел дело с аналогичной проблемой, когда первый объект VML, добавленный в IE, отображался правильно, а последующие - слишком маленькими, чтобы их можно было увидеть.

Эта статья блога помогла определить, что IE больше не поддерживает set / getAttribute для VML:

http://louisremi.com/2009/03/30/changes-in-vml-for-ie8-or-what-feature-can-the-ie-dev-team-break-for-you-today/

Оказывается, не только set / getAttributeне работает, но даже установка атрибутов непосредственно на элемент DOM (например, grid2.style.left = "300px") не работает.

В конечном итоге, казалось, что работало генерирование всей разметки для каждого элемента в виде строки и вставка ее в DOM путем установки его в качестве 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, затем переместите его к нужному родителю, повторите.

Ужасно, но это сработало!

0 голосов
/ 21 января 2012

Используйте documentFragment , чтобы добавить второй узел: 

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

this.container = document.documentElement;
var frag = document.createDocumentFragment();

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 = frag.appendChild(document.createElement("v:oval"));
grid.style.left="300px";
grid.style.top="400px";
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(frag);
this.container.appendChild(grid2);
...