ie6、ie7、ie8下支持js 使用vml style.addRule('v\\:line,v\\:stroken',"behavior:url(#default#VML);")

最新推荐文章于 2020-12-23 03:28:29 发布

yinxianluo

最新推荐文章于 2020-12-23 03:28:29 发布

阅读量3.6k

点赞数 1

分类专栏： JAVA开发文章标签： vml

本文链接：https://blog.csdn.net/yinxianluo/article/details/41280491

版权

本文介绍了如何在IE6、IE7、IE8下通过JavaScript支持VML（矢量标记语言）进行交互式绘制。针对不同版本的IE浏览器，提供了解决VML行为和样式兼容性问题的代码片段，特别是针对IE8的特殊处理。通过动态创建和设置VML元素，以及调整CSS样式，实现了在各个版本IE中正确显示VML图形。

摘要由CSDN通过智能技术生成

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