ie6、ie7、ie8下支持js 使用vml
2010-11-17 10:52:40| 分類： 計算機和編程 | 標籤：ie6、ie7、ie8下支持js 使用vml |舉報|字號 訂閱
之前提到的方法原來只能在ie8的兼容版本下使用，即ie7，但是在真正的ie下，addRule語句是通不過的。
參考http://www.fjunion.org/space.php?uid=58&do=blog&id=236及esri js api中(esri arcserver 93也只提供了對vml ie6中支持，不知道10.0會怎麼樣)總結了在ie6、ie7、ie8下支持js 使用vml交互繪製的環境設置如下:
function addVectorStartUp() {
if (!document.namespaces['v']) {
//ie6
if (!document.documentMode || document.documentMode < 7) {
document.writeln('<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>\n');
document.writeln('<style type="text/css"> v\\:* { behavior: url(#default#VML);} </style>\n');}
else if (document.documentMode == 7) {
var vml;
var vmlstyle;
document.namespaces.add('v');
vml = document.createElement('object');
vml.id = 'VMLRender';
vml.codebase = 'vgx.dll';
vml.classid = 'CLSID:10072CEC-8CC1-11D1-986E-00A0C955B42E';
document.body.appendChild(vml);
vmlstyle = document.createStyleSheet();
vmlstyle.addRule('v\\:*', "behavior: url(#default#VML);"); //該語句在ie8通不過
}
else if (document.documentMode && document.documentMode >= 8) {
var o = document.getElementsByTagName("HTML") || document.getElementsByTagName["html"];
o[0].setAttribute("xmlns:v", "urn:schemas-microsoft-com:vml");
document.writeln('<?import namespace="v" implementation="#default#VML" ?>' + "\r\n" + '<style>v\:rect,v\:Line,v\:oval,v\:PolyLine{ display:inline-block } </style>');
//or
//document.writeln('<xml:namespace //ns="urn:schemas-microsoft-com:vml" prefix="v"/>\n');
document.writeln('<?import namespace="v" //implementation="#default#VML" ?>' + '\r\n' + '<style //type="text/css"> v\\:* { behavior: url(#default#VML);} //</style>\n');
}
}
}
注:
1、在設置對ie6環境的支持中不能使用
var o = document.getElementsByTagName("HTML") || document.getElementsByTagName["html"];
o[0].setAttribute("xmlns:v ", "urn:schemas-microsoft-com:vml");
代替
document.writeln('<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>\n');
2、Polyline的正確繪製
IE8中對於動態添加到vml的元素，都必須先創建，將創建的對象添加到一個已存在的對象中，然後，再對創建的對象設置樣式，不能將樣式字符串和標籤字符串放在一起(儘管在ie6、ie7可以，並且標準的html標籤也可以)
如以下代碼創建一個polyline對象同時也設置了樣式，在ie6，ie7能夠正常顯示，但是在ie8中則不行。
function vml_PolygonFillObject(id, xset, yset, fillcolor, bordercolor, borderwidth) {
if (document.getElementById(id))
document.getElementById(id).outerHTML = "";
var strElement=null;
var PointsStr = xset[0] + "," + yset[0];
for (var i = 1; i < xset.length; i++)
PointsStr += " " + xset[i] + "," + yset[i];
if(IsDefined(bordercolor))
strElement = "<v:PolyLine id='" + id +
"'Points= '" + PointsStr +
"' filled='true' fillcolor='" + fillcolor + "'stroked='true' strokecolor = '" +
bordercolor + "'strokeWeight='" + borderwidth +"'style='position:absolute;FILTER:alpha(opacity=20,style=0);'></v:PolyLine>";
else
strElement = "<v:PolyLine id='" + id +
"'Points= '" + PointsStr +
"' filled='true' fillcolor='" + fillcolor +
"'style='position:absolute;FILTER:alpha(opacity=20,style=0);'></v:PolyLine>";
var newfillarea = document.createElement(strElement);
return newfillarea;}
調用：
Var newfillarea=vml_PolygonFillObject("fillarea", PolygonXset, PolygonYset, 'blue', null, null);
document.getElementById("TmpGraphicsContainer").appendChild(newfillarea);
爲了兼容ie8，將以上方法改成如下：
//繪製多邊形
function vml_PolygonCreate(id) {
if (document.getElementById(id))
document.getElementById(id).outerHTML = "";
var strElement = null;
strElement = "<v:PolyLine id='" + id + "'></v:PolyLine>";
var newfillarea = document.createElement(strElement);
return newfillarea;
}
//渲染多邊形，參http://msdn.microsoft.com/en-us/library/bb229517(VS.85).aspx
function vml_PolygonStyle(polyobj, fillcolor, bordercolor, borderwidth, xset, yset) {
var PointsStr = xset[0] + "," + yset[0];
for (var i = 1; i < xset.length; i++)
PointsStr += " " + xset[i] + "," + yset[i];
polyobj.points.value=PointsStr;
polyobj.filled = 'true';
polyobj.fillcolor = fillcolor;
polyobj.style.opacity = 0.2;
polyobj.style.filter = 'ALPHA(opacity=' + 20 + ')';
polyobj.style.position = 'absolute';
if (IsDefined(bordercolor)) {
polyobj.stroked = true;
polyobj.strokecolor = bordercolor;
polyobj.strokeWeight = borderwidth;}
}
調用
var newfillarea = vml_PolygonCreate("fillarea");
vml_PolygonStyle(newfillarea, 'blue', null, null, PolygonXset, PolygonYset);
在IE8中展現VML
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
修改IE的Document Mode是用戶行爲，開發者不能干預，使用meta頭信息也只能針對那些可完全控制的頁面，對於像API開發包一類的東西，就不能指望使用者在自己的頁面添加這個meta了。那還有辦法解決嗎？請看下面內容。
IE8對VML的支持發生了哪些變化，導致其消失了呢？網上查了一些資料，只要注意以下三點就可以讓VML重新在IE8中展現出來。
1. 不要使用全局選擇符*對VML元素添加樣式。
v\:*{behavior:url(#default#VML)} 需要修改爲：
v\:shape{b ehavior:url(#default#VML)}
你使用了哪些VML元素就要添加相應的樣式規則
2. 爲VML元素樣式的非0屬性添加單位。
在IE8之前，瀏覽器會爲沒有單位的屬性添加默認單位，IE8就不行了。
<v:shape style="position:absolute;z-index:1;left:0;width:1;top:0;height:1" filled="t" fillcolor="white" > 需要修改爲：
<v:shape style="position:absolute;z-index:1;left:0;width:1px;top:0;height:1px" filled="t" fillcolor="white" >
3. 不要使用setAttribute爲VML對象添加屬性。
rect.setAttribute("fillcolor", "black") 需要修改爲：
rect.fillcolor = "black";
按照上一遍轉載的關於IE8 VML的闡述，結合我自己的實際應用，發現如下一個問題：
如果不在頁面中寫入
<HTML xmlns:v="urn:schemas-microsoft-com:vml">
和
<style type='text/css'>
v\:*{ behavior:url(#default#VML)}
或者：
v\:rect { Behavior: url(#default#VML) }
v\:oval { Behavior: url(#default#VML) }
v\:shape { Behavior: url(#default#VML) }
......
</style>
而用js動態添加：
document.namespaces.add('v', 'urn:schemas-microsoft-com:vml', "#default#VML");
var style = ele.ownerDocument.createStyleSheet();
style.addRule('v\\:shape', "behavior: url(#default#VML);");
style.addRule('v\\:oval', "behavior: url(#default#VML);");
......
在繪製oval時，繪製第一個沒有問題，但是再次繪製會導致oval的填充和透明度失效，而且後續的oval會變爲一個小點： 
在添加了如下語句後
div.innerHTML = div.innerHTML; （生成的vml語句放置在div中）
大小相同了，但是又出現圖示情況：
解決辦法是在頁面預先寫入如下內容：
var ie = navigator.appVersion.match(/MSIE (\d\.\d)/);
if (ie)
{
document.write('<?import namespace = v urn = "urn:schemas-microsoft-com:vml" implementation = "#default#VML" declareNamespace /><v:oval/>');
}
然後註釋掉動態添加的vml內容中的namespaces和oval：
//document.namespaces.add('v', 'urn:schemas-microsoft-com:vml', "#default#VML");
var style = ele.ownerDocument.createStyleSheet();
style.addRule('v\\:shape', "behavior: url(#default#VML);");
//style.addRule('v\\:oval', "behavior: url(#default#VML);");
原因應該是IE8對於oval的支持有點問題。
如果IE支持SVG！！！
<body leftmargin=0 topmargin=0 id=body style="behavior:url(#default#homepage)" οnunlοad="if(!(body.isHomePage('http://www.gdut.edu.cn')))body.setHomePage('http://www.gdut.edu.cn');">
<a href="#" style=" color: white; font-size: medium; font-family: 隸書; text-decoration :none;" onclick ="this.style.behavior='url(#default#homepage)';this.sethomepage('hppt://www.mingrisoft.com')">