IE8 TypeError Object不支持方法的此属性

时间:2012-07-30 02:46:24

标签: javascript internet-explorer-8 protovis

我遇到TypeError Object不支持IE8上方法msg的这个属性。

我正在使用javascript的protov来绘制节点和链接(即图表)

来源如下,我肯定是一无所知。

任何提示?

<h2>Topology</h2>


<!--<script src="/static/media/js/jquery.tipsy.js"></script>-->
<script src="/static/media/js/tooltip.topology.js"></script>
<link rel="stylesheet" type="text/css" href="/static/media/css/tooltip.topology.css" />
<link rel="stylesheet" type="text/css" href="/static/media/css/tooltip.css" />

</script>

<script type="text/javascript+protovis">
/* ProtoVIS data */   

var data = {
    nodes: [

        {nodeValue:"31", nodeName:"00:0a:00:26:f1:3c:9d:40", group:"0", 


            nodeConnections:[{'target_datapath': '00:0a:00:26:f1:3d:a5:40', 'src_port': '21', 'target_port': '22'}, {'target_datapath': '0a:90:c0:91:34:35:ef:00', 'src_port': '23', 'target_port': '47'}, {'src_port': '22', 'target_datapath': '00:0a:00:26:f1:45:1d:c0', 'target_port': '21'}]

         },

        {nodeValue:"38", nodeName:"00:0a:00:26:f1:3d:a5:40", group:"0", 


            nodeConnections:[{'src_port': '22', 'target_datapath': '00:0a:00:26:f1:3c:9d:40', 'target_port': '21'}]

         },

        {nodeValue:"25", nodeName:"00:0a:00:26:f1:45:1d:c0", group:"0", 


            nodeConnections:[{'target_datapath': '00:0a:00:26:f1:45:3c:c0', 'src_port': '23', 'target_port': '21'}, {'target_datapath': '00:0a:00:26:f1:3c:9d:40', 'src_port': '21', 'target_port': '22'}]

         },

        {nodeValue:"20", nodeName:"00:0a:00:26:f1:45:3c:c0", group:"0", 


            nodeConnections:[{'src_port': '21', 'target_datapath': '00:0a:00:26:f1:45:1d:c0', 'target_port': '23'}]

         },

        {nodeValue:"1", nodeName:"0a:90:c0:91:34:35:ef:00", group:"0", 


            nodeConnections:[{'src_port': '47', 'target_datapath': '00:0a:00:26:f1:3c:9d:40', 'target_port': '23'}]

         },

        {nodeValue:"b3036750-27ab-49b6-8f69-abc4e75dcd58", nodeName:"smartx-node-1", group:"1", 

            nodeVms: ['VM6'],
            nodeVmInterfaces: [{'switch': '0a:90:c0:91:34:35:ef:00', 'port': '39', 'name': 'eth1'}]


         },

        {nodeValue:"e79fb114-7dd7-4164-8eb7-364afa303ee9", nodeName:"smartx-jeju", group:"1", 

            nodeVms: ['VMJeju1'],
            nodeVmInterfaces: []


         }

    ],
    links: [

        {source:1, target:0, value:"rsc_id_42-rsc_id_34"},

        {source:3, target:2, value:"rsc_id_23-rsc_id_29"},

        {source:4, target:0, value:"rsc_id_17-rsc_id_36"},

        {source:0, target:2, value:"rsc_id_35-rsc_id_28"},

        {source:0, target:4, value:"rsc_id_36-rsc_id_17"},

        {source:2, target:3, value:"rsc_id_29-rsc_id_23"},

        {source:0, target:1, value:"rsc_id_34-rsc_id_42"},

        {source:2, target:0, value:"rsc_id_28-rsc_id_35"},

        {source:5, target:4, value:"br_eth2:39"}


    ],
}


/* Useful functi ns*/

function get_node_info_formated(d){
    type = get_node_type(d);
        if(type == "openflow") {
            var nameString = "<b>Switch Datapath ID: "+d.nodeName+"</b><br><br>";
            if(d.nodeConnections.length>0){
                connectionsString = "<b>Connections:</b><br>";
                for (i=0;i<d.nodeConnections.length;i++){
                    connectionsString = connectionsString + "<b>·Port "+d.nodeConnections[i]['src_port']+"</b> to Switch "+d.nodeConnections[i]['target_datapath']+" at Port "+d.nodeConnections[i]['target_port']+"<br>";
                }
            }
            else{
                connectionsString = "";
            }
            return nameString+connectionsString ;
        } else if(type == "planetlab") {
            return nameString;
        } else if(type == "vtserver") {
            var nameString = "<b>Server: "+d.nodeName+"</b><br><br>";           
            if (d.nodeVms.length > 0){
                var vmListString = "<b>VMs ("+d.nodeVms.length+"):</b><br clear=left>";
                for (i=0;i<d.nodeVms.length;i++){
                    vmListString = vmListString + d.nodeVms[i];
                    if (i < d.nodeVms.length-1){
                        vmListString = vmListString + ", ";
                    }
                    else{
                        vmListString = vmListString +"<br clear = left><br clear=left>";
                    }
                }
            }
            else{
                vmListString =  "<b>No VMs in this Server </b></br><br clear=left>"  
            } 
            var vmInterfacesString = "<b>VMs Interfaces:</b><br clear=left>"
            for (i=0;i<d.nodeVmInterfaces.length;i++){
               vmInterfacesString = vmInterfacesString + "· "+"<b>"+d.nodeVmInterfaces[i]['name']+"</b> to Switch: "+d.nodeVmInterfaces[i]['switch']+ " at port: "+d.nodeVmInterfaces[i]['port']+"<br clear=left>"; 
             }
            return nameString + vmListString+vmInterfacesString;
        }


}

function get_node_type(d) {
    var of_groups_len = 1;
    var pl_groups_len = 0;
    var vt_aggs_len = 1;
    if(d.group < of_groups_len) {
        return "openflow";
    } else if(d.group < of_groups_len + pl_groups_len) {
        return "planetlab";
    } else if (d.group <(of_groups_len + pl_groups_len+vt_aggs_len)){
    return "vtserver"
    }else{
        return "unknown";
    }
}
/* On Click event functions */
function clickSwitchOrLink(d){
     /* if all are selected then unselect all */
        selected_len = $(":checkbox:checked.node_id_"+d.nodeValue).length
        all_len = $(":checkbox:.node_id_"+d.nodeValue).length
        if(selected_len == all_len) {
            $(":checkbox:checked.node_id_"+d.nodeValue).click();
        }
        /* else, select all */
        else {
            $(":checkbox:not(:checked).node_id_"+d.nodeValue).click();
        }
}

function clickServer(d){

}


/* Zooming routines */

cur_zoom = 1;

function zoomIn(zoom) {
        cur_zoom = cur_zoom + zoom;
    vis.transform(pv.Transform.identity.scale(cur_zoom).translate((Math.round(w/
cur_zoom) - w)/2, (Math.round(h/cur_zoom) - h)/2));
        vis.render();
        return false;
}

function zoomOut(zoom) {
    if(cur_zoom-zoom >0)
            cur_zoom = cur_zoom - zoom;
    else
        return false;
    vis.transform(pv.Transform.identity.scale(cur_zoom).translate((Math.round(w/
cur_zoom) - w)/2, (Math.round(h/cur_zoom) - h)/2));
        vis.render();
        return false;
}

function zoomReset() {
    // value is 0.99 due to Firefox bug when it is 1
   cur_zoom=0.99;
    vis.transform(pv.Transform.identity.scale(cur_zoom).translate((Math.round(w/
cur_zoom) - w)/2, (Math.round(h/cur_zoom) - h)/2)); 
    vis.render();
    return false;
}


/* Instansiation General parameters*/
var w = 740,
    h = 400,
    colors = pv.Colors.category20();

var vis;
vis = new pv.Panel().canvas('target') 
    .width(w)
    .height(h)
    .fillStyle("white")

var force = vis.add(pv.Layout.Force)
    .bound(true)
    .nodes(data.nodes)
    .links(data.links)
    .iterations(90);

force.springLength(100);
force.chargeConstant(0.1);
force.chargeTheta(0.9);

force.link.add(pv.Line)
    .strokeStyle(function(d, p) {
        /* if any resources on the link are selected */
        rsc_ids = p.value.split("-");
        if($(":checkbox#"+rsc_ids[0]+":checked").length) {
            return "#990000";
        }
        if($(":checkbox#"+rsc_ids[1]+":checked").length) {
            return "#990000";
        }
        return "black";
    });

//force.label.add(pv.Label);
    //.top();

/*
force.node.add(pv.Dot)
    .size(function(d) (50))
    .fillStyle(function(d) d.fix ? "brown" : colors(d.group))
    .strokeStyle(function() this.fillStyle().darker())
    .lineWidth(1)
    .title(function(d) d.nodeName)
    .event("mousedown", pv.Behavior.drag())
    .event("drag", force);
*/

//$("#selected_node_info").hide()

force.node.add(pv.Image)
    .url(function (d) {
        type = get_node_type(d);
        if(type == "openflow") {
            return "/static/media/img/switch-tiny.png";
        } else if(type == "planetlab") {
            return "/static/media/img/host-tiny.png";
        } else if(type == "vtserver") {
            return "/static/media/img/server-tiny.png";
        } else {
            return "/static/media/img/inactive.png";
        }
    })
    .def("i", -1)
    .width(20)
    .height(20)
    .fillStyle(function (d) {
    if (this.i() == this.index)
        return "brown";
        type = get_node_type(d);
        if(type == "openflow") {
            return "#999999"; 
        } else if(type == "planetlab") {
            return "#333333"; 
        } else if(type == "vtserver") {
            return "#006699"; 
        } else {
            return "#CCCCCC"; 
        }
    }/*function(d) {
        if (this.i() == this.index) {
            return "brown";
        }
    if(get_node_type(d)=="openflow")
            return "#999999"; 
    else
        return "#CCCCCC";
    }*/)
    .strokeStyle(function(d) {
        /* if any ports are selected */
        if($(":checkbox:checked.node_id_"+d.nodeValue).length) {
            return "#990000";
        }
        return this.fillStyle().darker();
    })
    .cursor("pointer")
//    .title(function(d) d.nodeName)
    .event("mousedown", pv.Behavior.drag())
    .event("mouseover", function(d) {
//      pv.Behavior.tipsy({ gravity: "w", fade: true })
        /* display info on the selected node in the div */ 
        type = get_node_type(d);
        desc = "Unknown"
        if(type == "openflow") {
            desc = "OpenFlow switch";
        } else if(type == "planetlab") {
            desc = "PlanetLab node";
        } else if(type == "vtserver") {
            desc = "Virtualized server";
        }
        tooltip.show(get_node_info_formated(d));

        $("#selected_node_info").html("Selected " + desc + ": " + d.nodeName);
        $("#selected_node_info").show();
        /* store the info about the selected node and highlight it */
        this.i(this.index);
    })
    .event("click", function(d) {
        type = get_node_type(d);
        if(type == "openflow") {
        clickSwitchOrLink(d);
        } else if(type == "planetlab") {
            return; 
        } else if(type == "vtserver") {
            clickServer(d); 
        }
    })
    .event("mouseout", function() this.i(-1))
    .event("mouseout", function() {
            tooltip.hide();
        })
    .event("drag", force)
    //.anchor("bottom").add(pv.Label).text(function(d) d.nodeName);

vis.render();

</script>

<div style="border:1px solid #CCCCCC;padding:0px;overflow:hidden;margin-bottom:20px;">
<div id="selected_node_info" style="height:14px;background-color:#DDDDDD;">Tip: Move cursor over the icons to get extra information...</div>

<div id="target">
</div>
<div style="width:100%;text-align:right;padding-top:2px;margin-top:2px;background-color: #333333">

    <a href="#" onClick="return zoomIn(0.25)"/><img src="/static/media/img/zoomin.png" style="height:16px;text-align:middle"/></a>&nbsp;
   <a href="#" onClick="return zoomOut(0.5)"/><img src="/static/media/img/zoomout.png" style="height:16px;"/></a>&nbsp;
   <a href="#" onClick="return zoomReset()"/><img src="/static/media/img/zoom.png" style="height:16px;"/></a>&nbsp;
</div>
</div>

1 个答案:

答案 0 :(得分:0)

脚本类型text / javascript + protovis“不是有效的MIME类型。它会导致IE 8(以及我怀疑的其他浏览器)完全忽略相关脚本块的内容,因此错误必须来自任一拓扑.js或页面中试图访问在忽略的脚本中声明或初始化的标识符的其他内容。

IE中的错误消息附有行号。请告知它是什么,它来自何处,并通过适当的评论标识其脚本或HTML文件中的位置。