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 = '" +
bordercol
ie6、ie7、ie8下支持js 使用vml style.addRule('v\\:line,v\\:stroken',"behavior:url(#default#VML);")
最新推荐文章于 2020-12-23 03:28:29 发布
本文介绍了如何在IE6、IE7、IE8下通过JavaScript支持VML(矢量标记语言)进行交互式绘制。针对不同版本的IE浏览器,提供了解决VML行为和样式兼容性问题的代码片段,特别是针对IE8的特殊处理。通过动态创建和设置VML元素,以及调整CSS样式,实现了在各个版本IE中正确显示VML图形。
摘要由CSDN通过智能技术生成