我一直致力于一个基本上使用存储在XML文件中的数据创建图像映射的项目。据我所知,代码使它到最后但在“mapGoesHere.appendChild(mapStructure);”上失败了。代码行。这是完整的代码...基本上向下滚动到底部以到达processRoomData函数,我认为代码正在死亡:
function loadSingleXML(fileToLoad, howToHandle) {
var xmlDoc = new ActiveXObject ("Microsoft.XMLDOM");
xmlDoc.async="false"
xmlDoc.load(fileToLoad);
alert("xmldoc.load(fileToLoad)");
var errorCode = xmlDoc.readyState;
if (errorCode == 4) {
howToHandle(xmlDoc);
alert("howToHandle(xmlDoc)");
} else {
alert("Unable to load the document " + url + "\n Error: " + errorCode);
}
}
function createRoomData(xmlRooms) {
var roomData = new Array();
roomData.roomCount = rooms.length;
for (var r=0; r<xmlRooms.length; ++r) {
roomData[r] = new Object();
roomData[r].portList = xmlRooms[r].getAttribute("ports");
roomData[r].number = xmlRooms[r].getAttribute("number");
roomData[r].occList = xmlRooms[r].getAttribute("occupant");
roomData[r].coordList = xmlRooms[r].getAttribute("coords");
}
return roomData;
}
function createMapStructure (xmlRoomData) {
var mapStructure;
var roomData;
var area;
rooms = xmlRoomData.getElementsByTagName("room");
roomData = createRoomData(rooms);
mapStructure = document.createElement("map");
for (var r=0; r<roomData.length; ++r) {
area = document.createElement("area");
area.setAttribute("name", roomData[r].numbersList);
area.setAttribute("shape", "rect");
area.setAttribute("coords", roomData[r].coordList);
area.setAttribute("onmouseover", "return overlib('" + roomData[r].portList + "', CAPTION, '" + roomData[r].occList + "');");
area.setAttribute("onmouseout", "nd();");
mapStructure.appendChild(area);
}
return mapStructure;
}
var mapLocation = "xml/floorOne.xml";
function processRoomData(mapData) {
mapStructure = createMapStructure(mapData);
alert("COMPLETED: createMapStructure");
mapStructure.setAttribute("name", "PortMap");
alert("COMPLETED: setAttribute");
mapGoesHere = document.getElementById("portNumbs");
alert("COMPLETED: getElementById");
mapGoesHere.appendChild(mapStructure);
alert("COMPLETED: appendChild");
}
loadSingleXML(mapLocation, processRoomData);
在底部的processRoomData函数中,我在每个步骤后添加了一个警告,试图弄清楚我的代码挂起的位置。最后一个警报(COMPLETED:appendChild)没有出现,这让我相信代码在特定的代码行上被挂起了。不幸的是,我不太了解编程以了解原因。有人能够善意地指出我的方式的错误,并以新手程序员可以理解的方式解释?谢谢。
编辑: 认为事物的HTML方面也可能是相关的,所以这里是HTML。没有多少。
<html>
<head>
<title>Combo Test</title>
<script type="text/javascript" src="javascript/overlib.js"></script>
<script type="text/javascript" src="javascript/xml-ie-load.js"></script>
</head>
<body>
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
<IMG WIDTH="1673" HEIGHT="1293" SRC="images/floor1.png" border="2" ismap usemap="#PortMap" />
<div id="portNumbs"></div>
</body>
</html>
编辑:每个请求,这里是一个正在加载的XML的示例:
<eoc xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="floor.xsd">
<facility location="Northpointe">
<floor level="One">
<room number="" occupant="Grace (7126)" ports="Unknown/Inaccessible" coords="1448,680,1523,717"/>
<room number="100" occupant="Brian (7010)" ports="001, 002, 003" coords="465,173,527,214"/>
<room number="" occupant="HL-5250DN (6392)" ports="050" coords="564,229,580,262"/>
<room number="101A" occupant="Richard (7038)" ports="013, 014(C), 015(P)" coords="554,155,608,203"/>
<room number="101B" occupant="TBD" ports="016, 017, 018(C)" coords="617,155,666,200"/>
<room number="101C" occupant="Jamie (7173)" ports="019(C), 020(P), 021" coords="675,158,730,202"/>
<room number="101D" occupant="Lucas (7145)" ports="Unknown/Inaccessible" coords="737,158,791,200"/>
<room number="101E" occupant="Dave (7100)" ports="Unknown/Inaccessible" coords="799,157,852,198"/>
<room number="101F" occupant="Eliot (7112)" ports="028(C), 029(C), 030(P)" coords="859,158,912,198"/>
</floor>
</facility>
</eoc>
如果有人想查看完整的工作项目,请访问Firefox或Internet Explorer中的newmap.levitonet.com。在该项目的主页上,我进行了一些浏览器检测,然后加载Firefox或IE版本的javascript文件。除了第一个“loadSingleXML”函数之外,两个文件都是相同的。该项目在Firefox中运行良好,但在Internet Explorer中不起作用。