Because the previous method XSLT needs to be imported directly inside the XML file, and the XML file used in the project is system generated, can only provide the path, but no way to rewrite the contents of the XML, so need to find a way to be able to external to the XML and XSLT together, so as to achieve the goal, It can also be applied to multiple XML files for easy management.
First on the code, the system using module this JS to package, module This tool is designed to be used to package JS, this tool after the introduction of the article, I will now only use, has not studied its underlying code; Here we will write JS in a file, including class and class implementation methods ，
Here is the JS code: transform.js
Copy Code code as follows:
var xmldom=function () {
if (window. ActiveXObject) {//IE
var arrsignatures = ["MSXML2. domdocument.5.0 "," MSXML2. Domdocument.4.0 ",
"MSXML2. domdocument.3.0 "," MSXML2. DOMDocument ",
"Microsoft.XMLDOM"];
for (Var i=0 i < arrsignatures.length; i++) {
try {
var oxmldom = new ActiveXObject (arrsignatures[i]);
return oxmldom;
} catch (Oerror) {
Ignore
}
}
throw new Error ("Your system does not have MSXML installed.");
else if (document.implementation.createDocument) {//Firefox
var oxmldom = document.implementation.createDocument ("", "", null);
return oxmldom;
} else{
throw new Error ("Browser does not support XML DOM object.");
}
}
var transformxslt=function (_xml,_xsl) {
if (window. Node) {
Node.prototype.transformNode = function (xsldom) {
var oprocessor = new Xsltprocessor ();
Oprocessor.importstylesheet (xsldom);
var oresultdom = oprocessor.transformtodocument (myxmldom);
var oserializer = new XMLSerializer ();
var sXml = oserializer.serializetostring (Oresultdom, "text/xml");
return sXml;
}
}
var myxmldom = new Xmldom ();
Myxmldom.async=false;
var myxsldom = new Xmldom ();
Myxsldom.async=false;
Myxmldom.load (_xml);
Myxsldom.load (_xsl);
var sresult=myxmldom.transformnode (myxsldom);
if (window. ActiveXObject) {
if (myXmlDom.parseError.errorCode!= 0) {
var serror=myxmldom.parseerror;
var txt = "";
TXT = = "<br> error code:";
TXT + + Serror.errorcode;
TXT + = "<br> error reason:";
TXT + + Serror.reason;
TXT = = "<br> Error line number:";
TXT + + serror.line;
document.write (TXT);
}else{
document.write (Sresult);
}
else if (document.implementation.createDocument) {
var oserializer = new XMLSerializer ();
var sxmldom = oserializer.serializetostring (Myxmldom, "text/xml");
var oparser = new Domparser ();
var oxmldom = oparser.parsefromstring (Sxmldom, "text/xml");
if (OXmlDom.documentElement.tagName = = "ParserError") {
var oxmlserializer = new XMLSerializer ();
var sxmlerror = oxmlserializer.serializetostring (oxmldom);
alert (sxmlerror);
} else {
document.write (Sresult);
}
}
}
var transformbinder = function (xml,xsl) {
This. XML = XML;
This. xsl = xsl;
}
TransformBinder.prototype.registerAction = function (handlers) {
This.handlers = handlers;
}
TransformBinder.prototype.bind = function () {
var _this = this;
This.handlers (_this. Xml,_this. XSL);
}
here is the HTML code: xslttransform.htm
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<script type= ' text/javascript ' src= ' transform.js ' ></script>
<body>
<script type= "Text/javascript" >
var xml = "Input XML path here";
var xsl = "Enter XSL path here";
var tempobj = new Transformbinder (xml,xsl);
Tempobj.registeraction (TRANSFORMXSLT);
Tempobj.bind ();
</script>
</body>
analyze the Transform.js:
Xmldom This constructor is the DOM element used to create the XML, for IE and FF, the method for creating the DOM is different, IE is created using the Window.activexobject method, and FF is created using the Document.implementation.createDocument method, which we use to determine whether IE or ff.
IE under the different version of the xml["MSXML2." domdocument.5.0 "," MSXML2. domdocument.4.0 "," MSXML2. domdocument.3.0 "," MSXML2. DOMDocument "," Microsoft.XMLDOM "], using a For loop traversal lookup to the corresponding version of the new ActiveXObject (Arrsignatures[i]) to establish the DOM;
FF with Document.implementation.createDocument ("", "", null), create DOM directly;
Throw error if the browser does not support XML DOM object.
Transformxslt This constructor does not transformnode this method using XSLT to convert XML into HTML,FF, so we construct a method ourselves,
Copy Code code as follows:
Node.prototype.transformNode = function (xsldom) {
var oprocessor = new Xsltprocessor ();
Oprocessor.importstylesheet (xsldom);
var oresultdom = oprocessor.transformtodocument (myxmldom);
var oserializer = new XMLSerializer ();
var sXml = oserializer.serializetostring (Oresultdom, "text/xml");
return sXml;
}
Then use this method to implement conversion, in the processing of errors on IE and FF have different processing methods, ie relatively simple, there is a ParseError attribute loading error information, ErrorCode is the wrong code, reason is the wrong reason, line is the wrong row number, there are some other information, Here, as long as the main error message can be displayed, if the error will show the contents of the error, if there is no error will show the result of the conversion sresult. FF is more complex, with XmlSerializer and xmlserializer.serializetostring () to convert xmldom to string, and then convert the string into a DOM object, in the process of conversion, if the error, You can get the information that contains the ParserError, judge whether the tagname of the resulting string is parsererror, and if so, convert the DOM object into a string to throw the contents of the string, if not the result of the conversion sresult.
Here are a few points to note:
A.ie can verify the XML DTD error, but the XML itself can only be detected by the syntax error of FF;
B. Because of the need to judge errors in the browser, the final result is not easy to merge, may be the structure of the code does not look reasonable, which is also helpless.
This class is packaged with Transformbinder to facilitate expansion and modification. TransformBinder.prototype.registerAction This prototype is used to register the event, and then bind the event with TransformBinder.prototype.bind, when you need to use this class, you only need the new Transformbinder (xml,xsl), register the Transformxslt event, bind it again, so that's the effect. If you need to expand, and then create a new constructor, register and bind to this class to achieve the effect.
