Solved

HTML not rendering in Safari, Chrome

Posted on 2010-08-13
5
1,344 Views
Last Modified: 2012-05-10
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

0
Comment
Question by:toneDigital
  • 3
5 Comments
 
LVL 6

Expert Comment

by:nitinsawhney
ID: 33432086
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
 

Author Comment

by:toneDigital
ID: 33433001
Will look into this. Thanks
0
 

Author Comment

by:toneDigital
ID: 33433416
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
 

Accepted Solution

by:
toneDigital earned 0 total points
ID: 33637486
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
 
LVL 9

Expert Comment

by:Sar1973
ID: 37862567
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

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
JDeveloper 12c for 32 bit 4 36
Detecting robots? 5 35
JavaScript error 1 34
Disabled form text field 2 5
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now