how to apply xsl styles to an embedded xml inside html with javascript
Question
I have a html file embedded xml tags inside, here i am trying to apply xslt styles are written in another separate file (somefile.xsl) importing with javascript, i am successful applying styles with external xslt file importing with javascript but it is working only in internet explorer , other browsers failed to apply styles.. bellow is my html code please look at my code. where i am doing wrong here ? Except IE no other browser seem working with these technique.
<HTML>
<HEAD>
<TITLE>Sample XML with XSL</TITLE>
<xml id="elx">
<hello-world>
<greeter>An XSLT Programmer</greeter>
<greeting>Hello, World! </greeting>
</hello-world>
</xml>
</HEAD>
<BODY>
<SCRIPT language = "javascript">
if(window.ActiveXObject)
{
//IE
alert("hi");
var xslDoc = new ActiveXObject("Microsoft.XMLDOM");
xslDoc.async = false;
xslDoc.load("helloworld.xsl");
document.write(elx.transformNode(xslDoc));
}
else if (document.implementation && document.implementation.createDocument)
{
//For Other Browsers
xsltProcessor=new XSLTProcessor();
xsltProcessor.importStylesheet("helloworld.xsl");
result = xsltProcessor.transformToDocument(elx);
// here 'elx' is id of embedded xml in header.
document.write(result);
}
</SCRIPT>
</BODY>
</HTML>
and here is my xsl ( helloworld.xsl ) file which i am trying to import with javascript and adding styles to embedded xml inside html file
<?xml version="1.0" encoding="ISO-8859-1" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" >
<xsl:output method="html" version="1.1" encoding="iso-8859-1" />
<xsl:template match="/hello-world">
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
<H1>
<xsl:value-of select="greeting"/>
</H1>
<xsl:apply-templates select="greeter"/>
</BODY>
</HTML>
</xsl:template>
within my html file i get only id of that xml file, by using that xml id i need to apply styles using javascript. hope you understand my issue and please solve this as soon as possible.
2 answers
solution1
1 2015-05-07 13:26:47
importStylesheet needs object(not url to file), you can get it from domParser
var domParser = new DOMParser();
xsltProcessor.importStylesheet( domParser.parseFromString(some_text_value, "text/xml") );
Full lazy solution for Firefox/Chorme like following code
<HTML>
<HEAD>
<script id="elx" type="text/xml">
<hello-world>
<greeter>An XSLT Programmer</greeter>
<greeting>Hello, World! </greeting>
</hello-world>
</script>
<script id="stlsh" type="text/xml">
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" version="1.1" encoding="iso-8859-1" />
<xsl:template match="/hello-world">
<HTML>
<BODY>
<H1>
<xsl:value-of select="greeting"/>
</H1>
<xsl:apply-templates select="greeter"/>
</BODY>
</HTML>
</xsl:template>
</xsl:stylesheet>
</script>
</HEAD>
<BODY>
<SCRIPT language = "javascript">
var domParser = new DOMParser();
var xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet( domParser.parseFromString(stlsh.innerHTML, "text/xml") );
var result = xsltProcessor.transformToDocument( domParser.parseFromString(elx.innerHTML, "text/xml") );
document.write(result.firstElementChild.innerHTML);
</SCRIPT>
</BODY>
</HTML>
If you will want use external files, you need to change stlsh.innerHTML/elx.innerHTML to XMLHttpRequest with responseText and put it to domParser.
Or get XMLHttpRequest responseXML.documentElement - may be, domParser doesn't need
solution2
0 2013-11-29 03:24:24
well for sure the go to XSL tutorial is W3Schools:
http://www.w3schools.com/xsl/xsl_transformation.asp
but in your cause I think the if-statement around your "other browser" is the issue that is suspect.
<yourCode>
else if (document.implementation && document.implementation.createDocument)
</yourCode>
can you add an alert or a console log into that If statement to check? also why do you have a second if statement at all? if you have "IE code" and "non IE" code why not just put it in an else?
NOTE: have not tried your code, its thanksgiving night and im a bit tired but just a few thoughts
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.