ezzemm
2008-07-02, 07:36:53
Hallo zusammen!
Ich habe bei uns im Geschäft ein Projekt für unser Intranet am Laufen. Leider ist dort PHP-Code nicht möglich, daher muss ich auf Javascript ausweichen. Bislang hatte ich davon noch null Plan, die letzten Tage habe ich mich aber darin eingearbeitet und fürs Erste ein simples Newsscript geschrieben.
Dieses Newsscript funktioniert mit dem Firefox zu vollsten Zufriedenheit. Mit dem IE6 (und nur der kommt in der Firma zum Einsatz) werden aller dings zwei Teile des Scriptes ignoriert, ohne allerdings eine Fehlermeldung zu erzeugen.
Zum ersten sezte ich in Zeile 62 des Scriptes ein class-Attribut für die li-Elemente mit li.setAttribute("class", "foo");. Laut Referenz sollte dieser Befehl seit IE5.5 integriert sein, der IE6 scheint es aber nicht zu übernehmen.
Zum zweiten überprüfe ich in Zeile 41 des Scriptes, ob dem url-Tag der XML-Daten ein id-Attribut eingefügt ist mit if (news.childNodes[j].attributes["id"]). Der Sinn ist es, daß wenn man in den XML-Daten dort eine ID hinterlegt, diesen Inhalt als Linknamen zu verwenden, ansonsten einen Standardtext als Linknamen.
Auch dies Funktioniert wunderbar in FF, in IE6 scheint die Abfrage aber immer false zu sein da nur der Standard-Linktext angezeigt wird.
Ich bin wie gesagt noch Anfänger in JS und kenne daher die Unterschiede zwischen FF und IE6 nicht. Kann mir jemand weiterhelfen und sagen wie ich den Code unter IE6 zum Laufen kriege?
JS-Code:
var http = null;
if (window.XMLHttpRequest) {
http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
http = new ActiveXObject("Microsoft.XMLHTTP");
}
window.onload = function() {
if (http != null) {
http.open("GET", "links.xml", true);
http.onreadystatechange = ausgeben;
http.send(null);
}
}
function ausgeben() {
if (http.readyState == 4) {
var liste = document.getElementById("Liste");
var daten = http.responseXML;
var ergebnisse = daten.getElementsByTagName("news");
for (var i = 0; i < ergebnisse.length; i++) {
var datum, newstext, url, linkname;
var news = ergebnisse[i];
for (var j = 0; j < news.childNodes.length; j++) {
with (news.childNodes[j]) {
if (nodeName == "datum") {
if (firstChild) {
datum = firstChild.nodeValue;
} else {
datum = false;
}
} else if (nodeName == "text") {
if (firstChild) {
newstext = firstChild.nodeValue;
} else {
newstext = "Kein Text angegeben";
}
} else if (nodeName == "url") {
if (firstChild) {
url = firstChild.nodeValue;
if (news.childNodes[j].attributes["id"]) {
linkname = news.childNodes[j].attributes["id"].value;
} else {
linkname = "Link";
}
} else {
url = false;
}
}
}
}
if (datum) {
var li = document.createElement("li");
var h5 = document.createElement("h5");
var p = document.createElement("p");
var modulo = i%2;
var string1 = document.createTextNode(datum);
var string2 = document.createTextNode(newstext);
var string3 = document.createTextNode(linkname);
h5.appendChild(string1);
p.appendChild(string2);
li.setAttribute("class", "list"+modulo);
li.appendChild(h5);
if (url) {
var a = document.createElement("a");
a.setAttribute("href", url);
a.setAttribute("target", "_blank");
a.appendChild(string3);
p.appendChild(document.createTextNode(" ( "));
p.appendChild(a);
p.appendChild(document.createTextNode(" )"));
}
li.appendChild(p);
liste.appendChild(li);
}
}
}
}
XML-Code:
<?xml version="1.0" encoding="ISO-8859-1"?>
<liste>
<news>
<datum>01. Juni 08</datum>
<text>Hier ist der Newstext.</text>
<url>http://www.link.de</url>
</news>
<news>
<datum>01. Juni 08</datum>
<text>Hier ist der Newstext.</text>
<url id="Alternativer Linkname">http://www.link.de</url>
</news>
</liste>
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>AJAX&XML-Test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style>
div { color: #333; font-family: Arial,Helvetica,SansSerif; font-size:10pt; margin: 100px;}
h5 { margin: 10px 0px; font-size: 12px; font-weight: bold; }
a:link { color: #006699; text-decoration: underline}
a:visited { color: #006699; text-decoration: underline}
a:hover { color: #6699CC; text-decoration: underline}
p { padding: 0px 0px 10px 0px; margin: 0px 0px 10px 0px; }
ul { padding: 0; margin: 0; list-style-type: none}
li {margin: 0; padding: 10px ; border-bottom: 1px solid DarkGray }
li.list0 { background-color: Ivory; }
li.list1 { background-color: Azure; }
</style>
<script language="JavaScript" src="ajax.js"></script>
</head>
<body>
<div>
<p>Diese Liste wird von Javascript generiert:</p>
<ul id="Liste"></ul>
</div>
</body>
</html>
Ich habe bei uns im Geschäft ein Projekt für unser Intranet am Laufen. Leider ist dort PHP-Code nicht möglich, daher muss ich auf Javascript ausweichen. Bislang hatte ich davon noch null Plan, die letzten Tage habe ich mich aber darin eingearbeitet und fürs Erste ein simples Newsscript geschrieben.
Dieses Newsscript funktioniert mit dem Firefox zu vollsten Zufriedenheit. Mit dem IE6 (und nur der kommt in der Firma zum Einsatz) werden aller dings zwei Teile des Scriptes ignoriert, ohne allerdings eine Fehlermeldung zu erzeugen.
Zum ersten sezte ich in Zeile 62 des Scriptes ein class-Attribut für die li-Elemente mit li.setAttribute("class", "foo");. Laut Referenz sollte dieser Befehl seit IE5.5 integriert sein, der IE6 scheint es aber nicht zu übernehmen.
Zum zweiten überprüfe ich in Zeile 41 des Scriptes, ob dem url-Tag der XML-Daten ein id-Attribut eingefügt ist mit if (news.childNodes[j].attributes["id"]). Der Sinn ist es, daß wenn man in den XML-Daten dort eine ID hinterlegt, diesen Inhalt als Linknamen zu verwenden, ansonsten einen Standardtext als Linknamen.
Auch dies Funktioniert wunderbar in FF, in IE6 scheint die Abfrage aber immer false zu sein da nur der Standard-Linktext angezeigt wird.
Ich bin wie gesagt noch Anfänger in JS und kenne daher die Unterschiede zwischen FF und IE6 nicht. Kann mir jemand weiterhelfen und sagen wie ich den Code unter IE6 zum Laufen kriege?
JS-Code:
var http = null;
if (window.XMLHttpRequest) {
http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
http = new ActiveXObject("Microsoft.XMLHTTP");
}
window.onload = function() {
if (http != null) {
http.open("GET", "links.xml", true);
http.onreadystatechange = ausgeben;
http.send(null);
}
}
function ausgeben() {
if (http.readyState == 4) {
var liste = document.getElementById("Liste");
var daten = http.responseXML;
var ergebnisse = daten.getElementsByTagName("news");
for (var i = 0; i < ergebnisse.length; i++) {
var datum, newstext, url, linkname;
var news = ergebnisse[i];
for (var j = 0; j < news.childNodes.length; j++) {
with (news.childNodes[j]) {
if (nodeName == "datum") {
if (firstChild) {
datum = firstChild.nodeValue;
} else {
datum = false;
}
} else if (nodeName == "text") {
if (firstChild) {
newstext = firstChild.nodeValue;
} else {
newstext = "Kein Text angegeben";
}
} else if (nodeName == "url") {
if (firstChild) {
url = firstChild.nodeValue;
if (news.childNodes[j].attributes["id"]) {
linkname = news.childNodes[j].attributes["id"].value;
} else {
linkname = "Link";
}
} else {
url = false;
}
}
}
}
if (datum) {
var li = document.createElement("li");
var h5 = document.createElement("h5");
var p = document.createElement("p");
var modulo = i%2;
var string1 = document.createTextNode(datum);
var string2 = document.createTextNode(newstext);
var string3 = document.createTextNode(linkname);
h5.appendChild(string1);
p.appendChild(string2);
li.setAttribute("class", "list"+modulo);
li.appendChild(h5);
if (url) {
var a = document.createElement("a");
a.setAttribute("href", url);
a.setAttribute("target", "_blank");
a.appendChild(string3);
p.appendChild(document.createTextNode(" ( "));
p.appendChild(a);
p.appendChild(document.createTextNode(" )"));
}
li.appendChild(p);
liste.appendChild(li);
}
}
}
}
XML-Code:
<?xml version="1.0" encoding="ISO-8859-1"?>
<liste>
<news>
<datum>01. Juni 08</datum>
<text>Hier ist der Newstext.</text>
<url>http://www.link.de</url>
</news>
<news>
<datum>01. Juni 08</datum>
<text>Hier ist der Newstext.</text>
<url id="Alternativer Linkname">http://www.link.de</url>
</news>
</liste>
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>AJAX&XML-Test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style>
div { color: #333; font-family: Arial,Helvetica,SansSerif; font-size:10pt; margin: 100px;}
h5 { margin: 10px 0px; font-size: 12px; font-weight: bold; }
a:link { color: #006699; text-decoration: underline}
a:visited { color: #006699; text-decoration: underline}
a:hover { color: #6699CC; text-decoration: underline}
p { padding: 0px 0px 10px 0px; margin: 0px 0px 10px 0px; }
ul { padding: 0; margin: 0; list-style-type: none}
li {margin: 0; padding: 10px ; border-bottom: 1px solid DarkGray }
li.list0 { background-color: Ivory; }
li.list1 { background-color: Azure; }
</style>
<script language="JavaScript" src="ajax.js"></script>
</head>
<body>
<div>
<p>Diese Liste wird von Javascript generiert:</p>
<ul id="Liste"></ul>
</div>
</body>
</html>