HTML not rendering in Safari, Chrome

Hi All,

My html page can render and display fine in IE and FF but not so much in Safari and Chrome. I'm guessing that something may be wrong with my javascript. Any help or direction with this is much appreciated.

Thanks!
tone


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>H41 Pop Up Test</title>

<link href="htmlStyles.css" rel="stylesheet" type="text/css" />


</head>

<body>
<a class="anc_h41back" href="#"><img class="btnBackArrow_top" src="h41popup_backBtn.png" /></a>


<div id="xslContent"></div>
<div id="xslContent2"></div>
<script>

function getURLVar(urlVarName) {
	var urlHalves = String(document.location).split('?');
	var urlVarValue = '';
	if(urlHalves[1]){
		var urlVars = urlHalves[1].split('&');
		for(var i=0; i<=(urlVars.length); i++){
			if(urlVars[i]){
				var urlVarPair = urlVars[i].split('=');
				if (urlVarPair[0] && urlVarPair[0].toLowerCase() == urlVarName.toLowerCase()) {
					urlVarValue = urlVarPair[1];
				}
			}
		}
	}
	
	
	return urlVarValue;
}



function loadXMLDoc(fname){
	var xmlDoc;
	
	// code for IE
	if (window.ActiveXObject){
		xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
	}
	
	// code for Mozilla, Firefox, Opera, etc.
	else if (document.implementation && document.implementation.createDocument){
		xmlDoc=document.implementation.createDocument("","",null);
	}else{
		alert('Your browser cannot handle this script');
	}
  
	xmlDoc.async=false;
	xmlDoc.load(fname);
	return(xmlDoc);
}

function displayResult(xmlDoc, xslDoc){
	
	var splitXmlDoc = xmlDoc.split('.');
	var newXslDoc = splitXmlDoc[0] + ".xsl";
	
	xml=loadXMLDoc(xmlDoc);
	xsl=loadXMLDoc(newXslDoc);
// code for IE
  if (window.ActiveXObject)
  {
    ex=xml.transformNode(xsl);
    document.getElementById("xslContent").innerHTML = ex;

  }
// code for Mozilla, Firefox, Opera, etc.
  else if (document.implementation
  && document.implementation.createDocument)
  {
    xsltProcessor=new XSLTProcessor();
    xsltProcessor.importStylesheet(xsl);
    resultDocument = xsltProcessor.transformToFragment(xml,document);
    document.getElementById("xslContent").appendChild(resultDocument);
	var al = document.getElementById("xslContent").innerHTML;
	
	// this will re-transform the html tags within the CDATA to render correctly in FF
	var rp = al.replace(/&lt;br\/&gt;/g,'<br />');
	
	rp = rp.replace(/&lt;strong&gt;/g,'<strong>');
	rp = rp.replace(/&lt;\/strong&gt;/g,'</strong>');
	
	rp = rp.replace(/&lt;b&gt;/g,'<b>');
	rp = rp.replace(/&lt;\/b&gt;/g,'</b>');
	
	rp = rp.replace(/&lt;ul&gt;/g,'<ul>');
	rp = rp.replace(/&lt;\/ul&gt;/g,'</ul>');
	
	rp = rp.replace(/&lt;ol&gt;/g,'<ol>');
	rp = rp.replace(/&lt;ol&nbsp;type=&quot;a&quot;&gt;/g,'<ol type="a">');
	rp = rp.replace(/&lt;\/ol&gt;/g,'</ol>');
	
	rp = rp.replace(/&lt;li&gt;/g,'<li>');
	rp = rp.replace(/&lt;\/li&gt;/g,'</li>');
	
	rp = rp.replace(/&lt;p&gt;/g,'<p>');
	rp = rp.replace(/&lt;\/p&gt;/g,'</p>');
	
	rp = rp.replace(/&lt;i&gt;/g,'<i>');
	rp = rp.replace(/&lt;\/i&gt;/g,'</i>');
	
	rp = rp.replace(/&lt;br&gt;/g,'<br>');
	rp = rp.replace(/&lt;\/br&gt;/g,'</br>');
	
	
	rp = rp.replace(/&lt;br\/&gt;/g,'<br />');
	
	rp = rp.replace(/&lt;textformat\b(.*?)&gt;/g,'<br/>');
	rp = rp.replace(/&lt;\/textformat&gt;/g,'');

	document.getElementById("xslContent").innerHTML = rp;
  }
}

function displayResult2(xmlDoc, xslDoc){
	
	
	xml=loadXMLDoc(xmlDoc);
	xsl=loadXMLDoc(xslDoc);
// code for IE
  if (window.ActiveXObject)
  {
    ex=xml.transformNode(xsl);
    document.getElementById("xslContent2").innerHTML = ex;

  }
// code for Mozilla, Firefox, Opera, etc.
  else if (document.implementation
  && document.implementation.createDocument)
  {
    xsltProcessor=new XSLTProcessor();
    xsltProcessor.importStylesheet(xsl);
    resultDocument = xsltProcessor.transformToFragment(xml,document);
    document.getElementById("xslContent2").appendChild(resultDocument);
	var al = document.getElementById("xslContent2").innerHTML;
	
	// this will re-transform the html tags within the CDATA to render correctly in FF
	var rp = al.replace(/&lt;br\/&gt;/g,'<br />');
	
	rp = rp.replace(/&lt;strong&gt;/g,'<strong>');
	rp = rp.replace(/&lt;\/strong&gt;/g,'</strong>');
	
	rp = rp.replace(/&lt;b&gt;/g,'<b>');
	rp = rp.replace(/&lt;\/b&gt;/g,'</b>');
	
	rp = rp.replace(/&lt;ul&gt;/g,'<ul>');
	rp = rp.replace(/&lt;\/ul&gt;/g,'</ul>');
	
	rp = rp.replace(/&lt;ol&gt;/g,'<ol>');
	rp = rp.replace(/&lt;ol&nbsp;type=&quot;a&quot;&gt;/g,'<ol type="a">');
	rp = rp.replace(/&lt;\/ol&gt;/g,'</ol>');
	
	rp = rp.replace(/&lt;li&gt;/g,'<li>');
	rp = rp.replace(/&lt;\/li&gt;/g,'</li>');
	
	rp = rp.replace(/&lt;p&gt;/g,'<p>');
	rp = rp.replace(/&lt;\/p&gt;/g,'</p>');
	
	rp = rp.replace(/&lt;i&gt;/g,'<i>');
	rp = rp.replace(/&lt;\/i&gt;/g,'</i>');
	
	rp = rp.replace(/&lt;br&gt;/g,'<br>');
	rp = rp.replace(/&lt;\/br&gt;/g,'</br>');
	
	rp = rp.replace(/&lt;blockquote&gt;/g,'<blockquote>');
	rp = rp.replace(/&lt;\/blockquote&gt;/g,'</blockquote>');
	
	rp = rp.replace(/&lt;br\/&gt;/g,'<br />');
	
	rp = rp.replace(/&lt;textformat\b(.*?)&gt;/g,'<br/>');
	rp = rp.replace(/&lt;\/textformat&gt;/g,'');

	document.getElementById("xslContent2").innerHTML = rp;
  }
}

displayResult(getURLVar('sheetFile'),"");
displayResult2(getURLVar('sheetFile'),"h41PrintTransform.xsl");
</script>

<a class="anc_h41back" href="#"><img class="btnBackArrow_bottom" src="h41popup_backBtn.png" /></a>
</body>

</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>H41 Pop Up Test</title>

<link href="htmlStyles.css" rel="stylesheet" type="text/css" />


</head>

<body>
<a class="anc_h41back" href="#"><img class="btnBackArrow_top" src="h41popup_backBtn.png" /></a>


<div id="xslContent"></div>
<div id="xslContent2"></div>
<script>

function getURLVar(urlVarName) {
	var urlHalves = String(document.location).split('?');
	var urlVarValue = '';
	if(urlHalves[1]){
		var urlVars = urlHalves[1].split('&');
		for(var i=0; i<=(urlVars.length); i++){
			if(urlVars[i]){
				var urlVarPair = urlVars[i].split('=');
				if (urlVarPair[0] && urlVarPair[0].toLowerCase() == urlVarName.toLowerCase()) {
					urlVarValue = urlVarPair[1];
				}
			}
		}
	}
	
	
	return urlVarValue;
}



function loadXMLDoc(fname){
	var xmlDoc;
	
	// code for IE
	if (window.ActiveXObject){
		xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
	}
	
	// code for Mozilla, Firefox, Opera, etc.
	else if (document.implementation && document.implementation.createDocument){
		xmlDoc=document.implementation.createDocument("","",null);
	}else{
		alert('Your browser cannot handle this script');
	}
  
	xmlDoc.async=false;
	xmlDoc.load(fname);
	return(xmlDoc);
}

function displayResult(xmlDoc, xslDoc){
	
	var splitXmlDoc = xmlDoc.split('.');
	var newXslDoc = splitXmlDoc[0] + ".xsl";
	
	xml=loadXMLDoc(xmlDoc);
	xsl=loadXMLDoc(newXslDoc);
// code for IE
  if (window.ActiveXObject)
  {
    ex=xml.transformNode(xsl);
    document.getElementById("xslContent").innerHTML = ex;

  }
// code for Mozilla, Firefox, Opera, etc.
  else if (document.implementation
  && document.implementation.createDocument)
  {
    xsltProcessor=new XSLTProcessor();
    xsltProcessor.importStylesheet(xsl);
    resultDocument = xsltProcessor.transformToFragment(xml,document);
    document.getElementById("xslContent").appendChild(resultDocument);
	var al = document.getElementById("xslContent").innerHTML;
	
	// this will re-transform the html tags within the CDATA to render correctly in FF
	var rp = al.replace(/&lt;br\/&gt;/g,'<br />');
	
	rp = rp.replace(/&lt;strong&gt;/g,'<strong>');
	rp = rp.replace(/&lt;\/strong&gt;/g,'</strong>');
	
	rp = rp.replace(/&lt;b&gt;/g,'<b>');
	rp = rp.replace(/&lt;\/b&gt;/g,'</b>');
	
	rp = rp.replace(/&lt;ul&gt;/g,'<ul>');
	rp = rp.replace(/&lt;\/ul&gt;/g,'</ul>');
	
	rp = rp.replace(/&lt;ol&gt;/g,'<ol>');
	rp = rp.replace(/&lt;ol&nbsp;type=&quot;a&quot;&gt;/g,'<ol type="a">');
	rp = rp.replace(/&lt;\/ol&gt;/g,'</ol>');
	
	rp = rp.replace(/&lt;li&gt;/g,'<li>');
	rp = rp.replace(/&lt;\/li&gt;/g,'</li>');
	
	rp = rp.replace(/&lt;p&gt;/g,'<p>');
	rp = rp.replace(/&lt;\/p&gt;/g,'</p>');
	
	rp = rp.replace(/&lt;i&gt;/g,'<i>');
	rp = rp.replace(/&lt;\/i&gt;/g,'</i>');
	
	rp = rp.replace(/&lt;br&gt;/g,'<br>');
	rp = rp.replace(/&lt;\/br&gt;/g,'</br>');
	
	
	rp = rp.replace(/&lt;br\/&gt;/g,'<br />');
	
	rp = rp.replace(/&lt;textformat\b(.*?)&gt;/g,'<br/>');
	rp = rp.replace(/&lt;\/textformat&gt;/g,'');

	document.getElementById("xslContent").innerHTML = rp;
  }
}

function displayResult2(xmlDoc, xslDoc){
	
	
	xml=loadXMLDoc(xmlDoc);
	xsl=loadXMLDoc(xslDoc);
// code for IE
  if (window.ActiveXObject)
  {
    ex=xml.transformNode(xsl);
    document.getElementById("xslContent2").innerHTML = ex;

  }
// code for Mozilla, Firefox, Opera, etc.
  else if (document.implementation
  && document.implementation.createDocument)
  {
    xsltProcessor=new XSLTProcessor();
    xsltProcessor.importStylesheet(xsl);
    resultDocument = xsltProcessor.transformToFragment(xml,document);
    document.getElementById("xslContent2").appendChild(resultDocument);
	var al = document.getElementById("xslContent2").innerHTML;
	
	// this will re-transform the html tags within the CDATA to render correctly in FF
	var rp = al.replace(/&lt;br\/&gt;/g,'<br />');
	
	rp = rp.replace(/&lt;strong&gt;/g,'<strong>');
	rp = rp.replace(/&lt;\/strong&gt;/g,'</strong>');
	
	rp = rp.replace(/&lt;b&gt;/g,'<b>');
	rp = rp.replace(/&lt;\/b&gt;/g,'</b>');
	
	rp = rp.replace(/&lt;ul&gt;/g,'<ul>');
	rp = rp.replace(/&lt;\/ul&gt;/g,'</ul>');
	
	rp = rp.replace(/&lt;ol&gt;/g,'<ol>');
	rp = rp.replace(/&lt;ol&nbsp;type=&quot;a&quot;&gt;/g,'<ol type="a">');
	rp = rp.replace(/&lt;\/ol&gt;/g,'</ol>');
	
	rp = rp.replace(/&lt;li&gt;/g,'<li>');
	rp = rp.replace(/&lt;\/li&gt;/g,'</li>');
	
	rp = rp.replace(/&lt;p&gt;/g,'<p>');
	rp = rp.replace(/&lt;\/p&gt;/g,'</p>');
	
	rp = rp.replace(/&lt;i&gt;/g,'<i>');
	rp = rp.replace(/&lt;\/i&gt;/g,'</i>');
	
	rp = rp.replace(/&lt;br&gt;/g,'<br>');
	rp = rp.replace(/&lt;\/br&gt;/g,'</br>');
	
	rp = rp.replace(/&lt;blockquote&gt;/g,'<blockquote>');
	rp = rp.replace(/&lt;\/blockquote&gt;/g,'</blockquote>');
	
	rp = rp.replace(/&lt;br\/&gt;/g,'<br />');
	
	rp = rp.replace(/&lt;textformat\b(.*?)&gt;/g,'<br/>');
	rp = rp.replace(/&lt;\/textformat&gt;/g,'');

	document.getElementById("xslContent2").innerHTML = rp;
  }
}

displayResult(getURLVar('sheetFile'),"");
displayResult2(getURLVar('sheetFile'),"h41PrintTransform.xsl");
</script>

</body>

</html>

Open in new window

toneDigitalAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
toneDigitalConnect With a Mentor Author Commented:
Added the fix to this function and now all is good.


function loadXMLDoc(fname){
	var xmlDoc;
	
	try //Internet Explorer 
    { 
        xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); 
        xmlDoc.async=false; 
        xmlDoc.load(fname); 
    } 
    catch(e) 
    { 
        try //Firefox, Mozilla, Opera, etc. 
        { 
            xmlDoc=document.implementation.createDocument("","",null); 
            xmlDoc.async=false; 
            xmlDoc.load(fname); 
        } 
        catch(e) 
        { 
            try //Google Chrome 
            { 
                var xmlhttp = new window.XMLHttpRequest(); 
                xmlhttp.open("GET",fname,false); 
                xmlhttp.send(null); 
                xmlDoc = xmlhttp.responseXML.documentElement; 
            } 
            catch(e) 
            { 
            error=e.message; 
            } 
        } 
    } 
    return xmlDoc; 

}

Open in new window

0
 
nitinsawhneyCommented:
One thing I would like to point out that your code won't pass validator as javascript nowadays is written as below:

<script type="text/javascript">
// <![CDATA[

// content of your Javascript goes here

// ]]>
</script>

Also, it would be worth checking that all the tags are properly closed as Safari and Chrome follow strict rules.

0
 
toneDigitalAuthor Commented:
Will look into this. Thanks
0
 
toneDigitalAuthor Commented:
All is good, all tags are closed, t's crossed and i's dotted but still can't render in Safari or Chrome. Any other suggestions? Thanks
0
 
Sar1973Commented:
For Mr. ToneDigital: is this a function to be loaded in order to make a generic Javsscript code working with every browser? If so, at which event should it be associated? And loaded also in iframed pages?
0
All Courses

From novice to tech pro — start learning today.