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

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

        最近发现使用VML绘制的图形在IE8下不见了，需要将IE8的Document Mode改为IE7 Standard才可以，或者你需要在页面添加这个信息：

        <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')">