GPX track not shown in Internet Explorer 8 WordPress
- SOLVED
The next version of my mapping plugin [[LINK href="http://www.mapmarker.com"]]http://www.mapmarker.com[[/LINK]] will allow users to add GPX-tracks and GPX-metadata.
Unfortunately the current dev version does not work in IE8.
See [[LINK href="http://pro.mapsmarker.com/?p=106"]]http://pro.mapsmarker.com/?p=106[[/LINK]] for an example.
The unminified gpx code can be found at the end of [[LINK href="http://pro.mapsmarker.com/wp-content/plugins/leaflet-maps-marker-pro/leaflet-dist/leaflet.js"]]http://pro.mapsmarker.com/wp-content/plugins/leaflet-maps-marker-pro/leaflet-dist/leaflet.js[[/LINK]]
In IE8 I am getting the following error in the console.
Object doesn't support this property or method
leaflet.js, line 268:
var name = xml.getElementsByTagName('name');
In IE9 and above the gpx track is displayed. Anyone know how to fix this?
Answers (3)
Ross Wilson answers:
Robert - this seems to be a big flaw in the GPX code that was originally written, their parsing function does not account for anything but modern browsers. I would suggest the following:
Add this code at line 227, which will give you a proper parser:
_parse_xml: function(xmlStr){
if (typeof window.DOMParser != "undefined") {
return ( new window.DOMParser() ).parseFromString(xmlStr, "text/xml");
} else if (typeof window.ActiveXObject != "undefined" &&
new window.ActiveXObject("Microsoft.XMLDOM")) {
var xmlDoc = new window.ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = "false";
xmlDoc.loadXML(xmlStr);
return xmlDoc;
} else {
throw new Error("No XML parser found");
}
},
then you can clean up your _load_xml function to just be:
_load_xml: function(url, cb, options, async) {
if (async == undefined) async = this.options.async;
if (options == undefined) options = this.options;
var gpx_content_toparse = this._htmlspecialchars_decode(this.options.gpx_content);
var xmlDoc = this._parse_xml(gpx_content_toparse);
if(xmlDoc){
cb(this._parse_xml(gpx_content_toparse), options);
} else{
console.log('error parsing xml');
}
},
Robert Seyfriedsberger comments:
Hi Ross,
looks better now, thanks - although the code now breaks on line 363 on IE8:
_ = el[i].getElementsByTagNameNS('*', 'hr');
According to [[LINK href="http://www.w3schools.com/jsref/met_document_getelementsbytagnamens.asp"]]http://www.w3schools.com/jsref/met_document_getelementsbytagnamens.asp[[/LINK]] this method is not supported by IE8 :-(
Do you know a wordaround for this?
best
Robert
Ross Wilson comments:
You should be able to replace that line with _ = el[i].getelementsByTagName('hr');
It looks like they are using a search for tag names within a namespace, but then setting the namespace to *.
Robert Seyfriedsberger comments:
For the record: it has to be _ = el[i].getElementsByTagName('hr');
Then it works - thx!
Plugarized answers:
in leaflet.js line 270
var name = xml.getElementsByTagName('name');
if (name.length > 0) {
this._info.name = name[0].textContent;
}
ie8 does not support .textContent and you would have .text instead
As you can see in here, https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent?redirectlocale=en-US&redirectslug=DOM%2FNode.textContent
The browser support for textcontent in IE is 9+
Perhaps a way to try and using both to support ie7/8 is
this._info.name = name[0].textContent || name[0].text;
or
this._info.name = name[0].textContent || name[0].innerText;
Here is an example http://jsfiddle.net/3SA2Y/
Robert Seyfriedsberger comments:
thx for pointing out that .textcontent is supported not supported in IE8 - anyway this does not seem to be only the reason for this bug.
Console says
Object doesn't support this property or method
leaflet.js, line 268:
var name = xml.getElementsByTagName('name');
even if I outcomment the line
this._info.name = name[0].innerText;
I still get the same error - it somehow seems that there is an another issue - see updated example on [[LINK href="http://pro.mapsmarker.com/?p=106"]]http://pro.mapsmarker.com/?p=106[[/LINK]]
Plugarized comments:
Where is the xml document that has the element "name" ?
Robert Seyfriedsberger comments:
Actually the gpx-track gets loaded & escaped for javascript via a php-proxy (to overcome cross-domain limitations). You see the actual content within the variable gpx_content on http://pro.mapsmarker.com/?p=106.
Next step is, that this string gets reverted back to xml syntax by the function _htmlspecialchars_decode and then as next step, I parse this string as XML - via
var parser = new DOMParser();
setTimeout(function() {
//cb(parser.parseFromString(gpx_content_toparse, "text/xml"), options);
cb(parser.parseFromString(input, "text/xml"), options);
});
for modern browsers and with
var parser = new ActiveXObject('Microsoft.XMLDOM');
parser.async = async;
//parser.loadXML(input);//added
setTimeout(function() {
//cb(parser.loadXML(input), options);
cb(parser.xml, options);
});
for IE8.
Eric P. answers:
Is your document XML? Or is it HTLM 5 or something else?
Try "document.getElementsByTagName" or if you're getting tags within some specific DOM object, then call the getElementsByTagName method on that object.
For example:
myMenu=document.getElementById('menu');
var anchors=myMenu.getElementsByTagName('a')
That code fragment will get all the "a" tag objects into the variable "anchors".
Robert Seyfriedsberger comments:
I am parsing a xml document, but the code you described is already in place and does not work unfortunately:
var name = xml.getElementsByTagName('name');
the problem is that xml. gets treated different in IE8 - just cant figure out what it is :-/