Meerdere VML-elementen toevoegen via JavaScript in IE8

Ik werk met IE 8 en probeer via mijn Javascript twee VML-ovalen (A, B) aan mijn pagina toe te voegen. Welk ovaal er ook wordt toegevoegd aan de bovenliggende DIV wordt weergegeven, maar de tweede is dat niet.

Als ik Child (A) toevoeg, vervolgens appendChild (B), wordt ovaal A gerenderd, B niet. Als ik Child (B) toevoeg en vervolgens Child (A) toevoeg, wordt Oval B weergegeven, A is dat niet.

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);

Mis ik een trucje met het toevoegen van VML?

Ik heb het in IE 9 geprobeerd, met dezelfde resultaten.

Vanwege bedrijfsregels wordt alleen IE binnen het bedrijf ondersteund en gebruiken veel gebruikers nog steeds IE8, dus ik kan op dit moment niet van HTML5 Canvas wisselen.

Bedankt voor alle suggesties

3
Wat is het doctype van de HTML-pagina, dit maakt een belangrijk verschil voor weergave van VML in IE?
toegevoegd de auteur David, de bron
Waarom geen Raphaël gebruiken? Dit heeft een veel schonere API; en zal VML gebruiken voor IE (en SVG voor andere browsers), dus je hebt IE-ondersteuning.
toegevoegd de auteur vcsjones, de bron
Ik ben begonnen met het bekijken van de Raphael-bibliotheek, het ziet er veelbelovend uit. Wat de DOCTYPE betreft, zal ik controleren wat ik heb. David, en je hebt gelijk, uit mijn ervaring is IE gevoeliger voor DOCTYPE dan voor andere browsers. Bedankt voor de snelle suggesties.
toegevoegd de auteur Scott S, de bron

2 antwoord

Ik behandelde een soortgelijk probleem, waarbij het eerste VML-object dat aan IE werd toegevoegd, correct werd weergegeven, maar de daaropvolgende werden te klein weergegeven om te zien.

Dit blogartikel was nuttig om te bepalen dat IE geen ondersteuning biedt voor set/getAttribute voor VML:

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

Het blijkt niet alleen dat set/getAttribute niet werkt, maar zelfs het direct instellen van de attributen op het DOM-element (bijvoorbeeld grid2.style.left = "300px") werkte niet.

Wat uiteindelijk leek te werken was het genereren van alle markeringen voor elk element als een tekenreeks, en het in de DOM te injecteren door het in te stellen als de innerHTML van een ander element.

var html2 = "";
var html = "";

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

Ik maakte een dummy-knooppunt dat ik gebruikte om de VML te hosten: stel innerHTML in en verplaats het naar de gewenste ouder, herhaal.

Lelijk, maar het werkte!

3
toegevoegd

Gebruik een documentFragment om het tweede knooppunt toe te voegen:

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);
0
toegevoegd