okM*_*nty 10 javascript xml browser xslt internet-explorer
我想使用JavaScript来显示我的XSLT,但在我的服务器上没有任何东西出现在浏览器中.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<meta http-equiv="Content-Language" content="en-us"/>
<title>Contracting, Licensing and Compliance News</title>
</head>
<body>
<script language="javascript">
function displayMessage() {
// Load XML
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("site-index.xml")
// Load the XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("site-index.xsl")
// Transform
document.write(xml.transformNode(xsl))
}
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
Chr*_*sen 31
您最好允许浏览器使用Xenan概述的方法执行转换.但是,完全可以在JavaScript中执行此操作.以下是如何以跨浏览器方式完成此操作的概述.
首先,您需要加载XML和XSL.有很多方法可以做到这一点.通常,它会涉及某种AJAX,但不一定.为了使这个答案变得简单,我将假设您已经涵盖了这一部分,但如果您需要更多帮助,请告诉我,我将编辑以包含加载XML的示例.
因此,让我们假设我们有这些对象:
var xml, xsl;
Run Code Online (Sandbox Code Playgroud)
其中xml
包含XML结构,并xsl
包含要转换的样式表.
编辑:
如果您需要加载这些对象,最终将使用某种形式的AJAX来执行此操作.有许多跨浏览器AJAX的例子.您最好使用库来完成此任务,而不是使用自己的解决方案.我建议你看看jquery或YUI,这两者都做得很好.
但是,基本思路非常简单.要完成此答案,以下是一些非库特定的代码,它们以跨浏览器的方式实现:
function loadXML(path, callback) {
var request;
// Create a request object. Try Mozilla / Safari method first.
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
// If that doesn't work, try IE methods.
} else if (window.ActiveXObject) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
}
}
}
// If we couldn't make one, abort.
if (!request) {
window.alert("No ajax support.");
return false;
}
// Upon completion of the request, execute the callback.
request.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status === 200) {
callback(request.responseXML);
} else {
window.alert("Could not load " + path);
}
}
};
request.open("GET", path);
request.send();
}
Run Code Online (Sandbox Code Playgroud)
您可以通过为其提供XML路径以及加载完成时要执行的函数来使用此代码:
loadXML('/path/to/your/xml.xml', function (xml) {
// xml contains the desired xml document.
// do something useful with it!
});
Run Code Online (Sandbox Code Playgroud)
我已经更新了我的例子来展示这种技术.你可以在这里找到一些工作演示代码.
要执行转换,最终将得到第三个XML文档,这是该转换的结果.如果您正在使用IE,则使用" transformNodeToObject "方法,如果您正在使用其他浏览器,则使用" transformToDocument "方法:
var result;
// IE method
if (window.ActiveXObject) {
result = new ActiveXObject("MSXML2.DOMDocument");
xml.transformNodeToObject(xsl, result);
// Other browsers
} else {
result = new XSLTProcessor();
result.importStylesheet(xsl);
result = result.transformToDocument(xml);
}
Run Code Online (Sandbox Code Playgroud)
此时,result
应包含由此产生的转换.这仍然是一个XML文档,你应该这样对待它.如果你想要一个你可以传入的字符串,document.write
或者innerHTML
你还有一些工作要做.
再一次,有一个IE方法,以及一个适用于其他浏览器的方法.
var x, ser, s = '';
// IE method.
if (result.childNodes[0] && result.childNodes[0].xml) {
for (x = 0; x < result.childNodes.length; x += 1) {
s += result.childNodes[x].xml;
}
// Other browsers
} else {
ser = new XMLSerializer();
for (x = 0; x < result.childNodes.length; x += 1) {
s += ser.serializeToString(result.childNodes[x]);
}
}
Run Code Online (Sandbox Code Playgroud)
现在s
应该将生成的XML包含为字符串.你应该能够将它传递给document.write或innerHTML,让它做一些有用的事情.请注意,它可能包含XML声明,您可能想要删除它.
我在Chrome,IE9和FF4中测试了这个.你可以在我的测试平台上找到一个简化的准系统,这个例子.
祝你好运,编码愉快!
浏览器可以为您执行转换.不需要javascript,只需链接.xml中的.xsl,如下所示:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="site-index.xsl" ?>
Run Code Online (Sandbox Code Playgroud)
并只是提供xml,没有HTML.假设您的.xsl包含正确的代码
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="4.01" indent="yes"/>
<xsl:output doctype-system="http://www.w3.org/TR/html4/strict.dtd"/>
<xsl:output doctype-public="-//W3C//DTD HTML 4.01//EN"/>
Run Code Online (Sandbox Code Playgroud)
使用此脚本使用test.xsl转换test.xml并将输出附加到容器.
<div id="container"></div>
<script>
function loadXMLDoc(filename) {
if (window.ActiveXObject) {
xhttp = new ActiveXObject("Msxml2.XMLHTTP");
} else {
xhttp = new XMLHttpRequest();
}
xhttp.open("GET", filename, false);
xhttp.send("");
return xhttp.responseXML;
}
xml = loadXMLDoc("test.xml");
xsl = loadXMLDoc("test.xsl");
if (document.implementation && document.implementation.createDocument) {
xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToFragment(xml, document);
document.getElementById('container').appendChild(resultDocument);
}
</script>
Run Code Online (Sandbox Code Playgroud)
归档时间: |
|
查看次数: |
41037 次 |
最近记录: |