如何在IE 8和Chrome中使用JavaScript和三个XML文件显示XSLT? [英] How to display XSLT in IE 8 and Chrome with javascript and three XML files?
问题描述
Internet Explorer 8:
Google Chrome 13:
Javascript:
XSLT:
XML:
IE 8没有任何东西出现,但歌剧和Firefox都很好。当我在Chrome 13.1中加载JavaScript时,第一个xml文档出现,第二个和第三个文档根本不显示。我正在引用xslt文件中的三个xml文件。 javascript来自w3shools。
如何让这些内容填充到IE和Chrome?
文件:
load_xml_javascript.html
delivery_and_activity.xsl
delivery.xml
activity.xml
click_through.xml
load_xml_javascript.html
< html>
< head>
< script>
函数loadXMLDoc(dname)
{
if(window.XMLHttpRequest)
{
xhttp = new XMLHttpRequest();
}
else
{
xhttp = new ActiveXObject(Microsoft.XMLHTTP);
}
xhttp.open(GET,dname,false);
xhttp.send();
return xhttp.responseXML;
}
function displayResult()
{
xml = loadXMLDoc(delivery.xml);
xsl = loadXMLDoc(delivery_activity_clickthrough.xsl);
//代码为IE
if(window.ActiveXObject)
{
ex = xml.transformNode(xsl);
document.getElementById(example)。innerHTML = ex;
}
// Mozilla,Firefox,Opera等的代码
else if(document.implementation&&document.implementation.createDocument)
{
xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToFragment(xml,document);
document.getElementById(example)。appendChild(resultDocument);
}
}
< / script>
< / head>
< body onLoad =displayResult()>
< div id =example/>
< / body>
< / html>
delivery_and_activity.xsl
<?xml version =1.0encoding =utf-8?>
<! - DWXMLSource =delivery.xml - >
<!DOCTYPE xsl:stylesheet [
<!ENTITY nbsp&#160;>>
<!ENTITY copy&#169;>>
<!ENTITY reg&#174;>
<!ENTITY trade&#8482;>>
<!ENTITY mdash&#8212;>
<!ENTITY ldquo&#8220;>>
<!ENTITY rdquo&#8221;>>
<!ENTITY pound&#163;>
<!ENTITY yen&#165;>>
<!ENTITY euro&#8364;>
]>
< xsl:stylesheet version =1.0xmlns:xsl =http://www.w3.org/1999/XSL/Transform>
< xsl:output method =htmlencoding =utf-8doctype-public = - // W3C // DTD XHTML 1.0 Transitional // ENdoctype-
系统= http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd/>
< xsl:template match =/>
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< title>交货摘要< / title>
< / head>
< body>
< h2 style =margin:25px 0px -20px 30px; color:#003399;> Delivery Summary< / h2>
< table style =margin:25px; font-family:'Lucida Sans Unicode','Lucida Grande',sans-serif; text-align:left; font-size:12px;
border-collapse:collapse>
< thead>
< tr>
< th width =165height =30scope =colstyle =background:#b9c9fe url('left.png')left -1px no-repeat; color:#003399;
padding:8px;>类型< / th>
#003399;>总计< / th>
< / tr>
< / thead>
< tfoot>
< / tfoot>
< tbody>
< xsl:for-each select =DELIVERY / SUMMARY>
< tr>
< td style =background:#e8edff; color:#003399; padding:8px; border-top:1px solid #fff;>< xsl:value-of
select =TITLE/>< / td>
< td style =background:#e8edff; color:#003399; padding:8px; border-top:1px solid #fff;>< xsl:value-of
select =ATTEMPTED/>< / td>
< td style =background:#e8edff; color:#003399; padding:8px; border-top:1px solid #fff;>< xsl:value-of
select =TOTAL/>< / td>
< / tr>
< / xsl:for-each>
< / tbody>
< / table>
< h2 style =margin:25px 0px -20px 30px; color:#003399;>活动摘要< / h2>
< table style =margin:25px; font-family:'Lucida Sans Unicode','Lucida Grande',sans-serif; text-align:left; font-size:12px;
border-collapse:collapse>
< thead>
< tr>
< th width =165height =30scope =colstyle =background:#b9c9fe url('left.png')left -1px no-repeat; color:#003399;
padding:8px;>类型< / th>
#003399;>总计< / th>
< / tr>
< / thead>
< tfoot>
< / tfoot>
< tbody>
< xsl:for-each select =document('activity.xml')/ ACTIVITY / SUMMARY>
< tr>
< td style =background:#e8edff; color:#003399; padding:8px; border-top:1px solid #fff;>< xsl:value-of
select =TITLE/>< / td>
< td style =background:#e8edff; color:#003399; padding:8px; border-top:1px solid #fff;>< xsl:value-of
select =ATTEMPTED/>< / td>
< td style =background:#e8edff; color:#003399; padding:8px; border-top:1px solid #fff;>< xsl:value-of
select =TOTAL/>< / td>
< / tr>
< / xsl:for-each>
< / tbody>
< / table>
< h2 style =margin:25px 0px -20px 30px; color:#003399;>点击通过报告< / h2>
< table style =margin:25px; font-family:'Lucida Sans Unicode','Lucida Grande',sans-serif; text-align:left; font-size:12px;
border-collapse:collapse>
< thead>
< tr>
< th width =165height =30scope =colstyle =background:#b9c9fe url('left.png')left -1px no-repeat; color:#003399;
padding:8px;>类型< / th>
#003399;>总计< / th>
< / tr>
< / thead>
< tfoot>
< / tfoot>
< tbody>
< xsl:for-each select =document('click_through.xml')/ ACTIVITY / SUMMARY>
< tr>
< td style =background:#e8edff; color:#003399; padding:8px; border-top:1px solid #fff;>< xsl:value-of
select =URL/>< / td>
< td style =background:#e8edff; color:#003399; padding:8px; border-top:1px solid #fff;>< xsl:value-of
select =UNIQUE/>< / td>
< td style =background:#e8edff; color:#003399; padding:8px; border-top:1px solid #fff;>< xsl:value-of
select =TOTAL/>< / td>
< / tr>
< / xsl:for-each>
< / tbody>
< / table>
< / body>
< / html>
< / xsl:template>
< / xsl:stylesheet>
delivery.xml
<?xml version =1.0encoding =ISO-8859-1?>
< DELIVERY>
<概要>
< TITLE>试图传送< / TITLE>
< ATTEMPTED> 100< / ATTEMPTED>
< TOTAL> 21256< / TOTAL>
< / SUMMARY>
<概要>
< TITLE> Hard Bounces< / TITLE>
< ATTEMPTED> .68< / ATTEMPTED>
< TOTAL> 145< / TOTAL>
< / SUMMARY>
<概要>
< TITLE> Soft Bounces< / TITLE>
< ATTEMPTED> 4.48< / ATTEMPTED>
< TOTAL> 953< / TOTAL>
< / SUMMARY>
<概要>
< TITLE>成功投放< / TITLE>
< ATTEMPTED> 94.8< / ATTEMPTED>
< TOTAL> 20158< / TOTAL>
< / SUMMARY>
< / DELIVERY>
activity.xml
<?xml version =1.0encoding =ISO-8859-1?>
<! - 由XMLSpy®编辑 - >
< ACTIVITY>
<概要>
已打开< / TITLE>
< ATTEMPTED> 22.96< / ATTEMPTED>
< TOTAL> 4629< / TOTAL>
< / SUMMARY>
<概要>
< TITLE>点击通过< / TITLE>
< ATTEMPTED> 4.10< / ATTEMPTED>
< TOTAL> 829< / TOTAL>
< / SUMMARY>
<概要>
< TITLE>已回覆< / title>
< ATTEMPTED> 0.12< / ATTEMPTED>
< TOTAL> 24< / TOTAL>
< / SUMMARY>
<概要>
< TITLE>取消订阅< / title>
< ATTEMPTED> 0.25< / ATTEMPTED>
< TOTAL> 51< / TOTAL>
< / SUMMARY>
<概要>
< TITLE>转发< / TITLE>
< ATTEMPTED> 0.00< / ATTEMPTED>
< TOTAL> 0< / TOTAL>
< / SUMMARY>
<概要>
< TITLE>订阅的< / TITLE>
< ATTEMPTED> 0.00< / ATTEMPTED>
< TOTAL> 0.00< / TOTAL>
< / SUMMARY>
<概要>
< TITLE> SpamComplaints< / TITLE>
< ATTEMPTED> 0.3< / ATTEMPTED>
< TOTAL> 6< / TOTAL>
< / SUMMARY>
< / ACTIVITY>
click_through.xml
<?xml version =1.0encoding =ISO-8859-1?>
<! - 由XMLSpy®编辑 - >
< ACTIVITY>
<概要>
<网址> navbar婚礼< /网址>
< UNIQUE> 1< / UNIQUE>
< TOTAL> 1< / TOTAL>
< / SUMMARY>
<概要>
< URL> navbar honeymoon< / URL>
< UNIQUE> 1< / UNIQUE>
< TOTAL> 1< / TOTAL>
< / SUMMARY>
<概要>
<网址>提交rfp< /网址>
< UNIQUE> 1< / UNIQUE>
< TOTAL> 1< / TOTAL>
< / SUMMARY>
< / ACTIVITY>
作为替代方法,您可以使用更简单的非JavaScript ,浏览器的客户端XSL转换,没有 load_xml_javascript.html
文件,只需添加到 delivery.xml $ c $
<?xml-stylesheet type =text / xslhref = delivery_and_activity.xsl >?;
测试(显示三张表):
- Internet Explorer 8
- Firefox 6
- Opera 11.50
- Google Chrome 13,但是对于本地(无需Web服务器)转换,您需要使用
- 允许文件从文件访问
开关 运行浏览器 - Safari 5.1
对于基于JavaScript的解决方案表(第二和第三)在Google Chrome 13中为空,因为 document()
函数在Webkit引擎下无法正常工作。看一看:
对于Internet Explorer 8(以及9)简化的初始代码:
$ b
function loadXMLDoc(dname)
{
var xhttp;
if(window.XMLHttpRequest)
xhttp = new XMLHttpRequest();
xhttp.open(GET,dname,false);
xhttp.send();
return xhttp.responseXML;
function displayResult()
{
var xml = loadXMLDoc(delivery.xml);
var xsl = loadXMLDoc(delivery_and_activity.xsl);
if(window.ActiveXObject)
{
var output = xml.transformNode(xsl);
document.getElementById(example)。innerHTML = output;
$ b使用F12来调试它,你会看到错误信息(事实上相同的问题与此处):
$ b
访问被拒绝
然而,您可以尝试使用以下代码:
$ b
function loadXMLDoc(filePath)
{
var xmlDoc;
if(window.ActiveXObject)
{
xmlDoc = new ActiveXObject(Microsoft.XMLDOM);
xmlDoc.async = false;
xmlDoc.validateOnParse = false;
xmlDoc.load(filePath);
}
return xmlDoc;
}
函数displayResult()
{
var xml = loadXMLDoc(delivery.xml);
var xsl = loadXMLDoc(delivery_and_activity.xsl);
if(window.ActiveXObject)
{
var output = xml.transformNode(xsl);
document.getElementById(example)。innerHTML = output;
要正确显示页面,请剪切下列属性:
doctype-public = - // W3C // DTD XHTML 1.0 Transitional // EN
doctype-system =http ://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
正如您所看到的,使用浏览器的原生XSL转换比使用基于JavaScript的转换更容易。
Internet Explorer 8:
Google Chrome version 13:
Javascript:
XSLT:
XML:
In IE 8 nothing popluates but opera and firefox are just fine. When I load the javascript in Chrome 13.1 the first xml doc shows up and the 2nd and 3rd do not show up at all. I am referencing the three xml files in the xslt file. The javascript is from w3shools.
How can I get these to populate in IE and Chrome?
Files:
load_xml_javascript.html
delivery_and_activity.xsl
delivery.xml
activity.xml
click_through.xml
load_xml_javascript.html
<html>
<head>
<script>
function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",dname,false);
xhttp.send("");
return xhttp.responseXML;
}
function displayResult()
{
xml=loadXMLDoc("delivery.xml");
xsl=loadXMLDoc("delivery_activity_clickthrough.xsl");
// code for IE
if (window.ActiveXObject)
{
ex=xml.transformNode(xsl);
document.getElementById("example").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("example").appendChild(resultDocument);
}
}
</script>
</head>
<body onLoad="displayResult()">
<div id="example" />
</body>
</html>
delivery_and_activity.xsl
<?xml version="1.0" encoding="utf-8"?>
<!-- DWXMLSource="delivery.xml" -->
<!DOCTYPE xsl:stylesheet [
<!ENTITY nbsp " ">
<!ENTITY copy "©">
<!ENTITY reg "®">
<!ENTITY trade "™">
<!ENTITY mdash "—">
<!ENTITY ldquo "“">
<!ENTITY rdquo "”">
<!ENTITY pound "£">
<!ENTITY yen "¥">
<!ENTITY euro "€">
]>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-
system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Delivery Summary</title>
</head>
<body>
<h2 style="margin: 25px 0px -20px 30px; color: #003399;">Delivery Summary</h2>
<table style="margin: 25px; font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; text-align:left; font-size:12px;
border-collapse:collapse">
<thead>
<tr>
<th width="165" height="30" scope="col" style="background: #b9c9fe url('left.png') left -1px no-repeat; color: #003399;
padding: 8px;">Type</th>
<th width="209" scope="col" style="background: #b9c9fe; color: #003399; padding: 8px;">% of Attempted to Deliver</th>
<th width="90" scope="col" style="background: #b9c9fe url('right.png') right -1px no-repeat; padding: 8px; color:
#003399;">Total</th>
</tr>
</thead>
<tfoot>
</tfoot>
<tbody>
<xsl:for-each select="DELIVERY/SUMMARY">
<tr>
<td style="background: #e8edff; color: #003399; padding: 8px; border-top: 1px solid #fff;"><xsl:value-of
select="TITLE"/></td>
<td style="background: #e8edff; color: #003399; padding: 8px; border-top: 1px solid #fff;"><xsl:value-of
select="ATTEMPTED"/></td>
<td style="background: #e8edff; color: #003399; padding: 8px; border-top: 1px solid #fff;"><xsl:value-of
select="TOTAL"/></td>
</tr>
</xsl:for-each>
</tbody>
</table>
<h2 style="margin: 25px 0px -20px 30px; color: #003399;">Activity Summary</h2>
<table style="margin: 25px; font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; text-align:left; font-size:12px;
border-collapse:collapse">
<thead>
<tr>
<th width="165" height="30" scope="col" style="background: #b9c9fe url('left.png') left -1px no-repeat; color: #003399;
padding: 8px;">Type</th>
<th width="209" scope="col" style="background: #b9c9fe; color: #003399; padding: 8px;">% of Successfully Delivered</th>
<th width="90" scope="col" style="background: #b9c9fe url('right.png') right -1px no-repeat; padding: 8px; color:
#003399;">Total</th>
</tr>
</thead>
<tfoot>
</tfoot>
<tbody>
<xsl:for-each select="document('activity.xml')/ACTIVITY/SUMMARY">
<tr>
<td style="background: #e8edff; color: #003399; padding: 8px; border-top: 1px solid #fff;"><xsl:value-of
select="TITLE"/></td>
<td style="background: #e8edff; color: #003399; padding: 8px; border-top: 1px solid #fff;"><xsl:value-of
select="ATTEMPTED"/></td>
<td style="background: #e8edff; color: #003399; padding: 8px; border-top: 1px solid #fff;"><xsl:value-of
select="TOTAL"/></td>
</tr>
</xsl:for-each>
</tbody>
</table>
<h2 style="margin: 25px 0px -20px 30px; color: #003399;">Click Through Report</h2>
<table style="margin: 25px; font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; text-align:left; font-size:12px;
border-collapse:collapse">
<thead>
<tr>
<th width="165" height="30" scope="col" style="background: #b9c9fe url('left.png') left -1px no-repeat; color: #003399;
padding: 8px;">Type</th>
<th width="209" scope="col" style="background: #b9c9fe; color: #003399; padding: 8px;">% of Successfully Delivered</th>
<th width="90" scope="col" style="background: #b9c9fe url('right.png') right -1px no-repeat; padding: 8px; color:
#003399;">Total</th>
</tr>
</thead>
<tfoot>
</tfoot>
<tbody>
<xsl:for-each select="document('click_through.xml')/ACTIVITY/SUMMARY">
<tr>
<td style="background: #e8edff; color: #003399; padding: 8px; border-top: 1px solid #fff;"><xsl:value-of
select="URL"/></td>
<td style="background: #e8edff; color: #003399; padding: 8px; border-top: 1px solid #fff;"><xsl:value-of
select="UNIQUE"/></td>
<td style="background: #e8edff; color: #003399; padding: 8px; border-top: 1px solid #fff;"><xsl:value-of
select="TOTAL"/></td>
</tr>
</xsl:for-each>
</tbody>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
delivery.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<DELIVERY>
<SUMMARY>
<TITLE>Attempted to deliver</TITLE>
<ATTEMPTED>100</ATTEMPTED>
<TOTAL>21256</TOTAL>
</SUMMARY>
<SUMMARY>
<TITLE>Hard Bounces</TITLE>
<ATTEMPTED>.68</ATTEMPTED>
<TOTAL>145</TOTAL>
</SUMMARY>
<SUMMARY>
<TITLE>Soft Bounces</TITLE>
<ATTEMPTED>4.48</ATTEMPTED>
<TOTAL>953</TOTAL>
</SUMMARY>
<SUMMARY>
<TITLE>Successfully delivered</TITLE>
<ATTEMPTED>94.8</ATTEMPTED>
<TOTAL>20158</TOTAL>
</SUMMARY>
</DELIVERY>
activity.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited by XMLSpy® -->
<ACTIVITY>
<SUMMARY>
<TITLE>Opened</TITLE>
<ATTEMPTED>22.96</ATTEMPTED>
<TOTAL>4629</TOTAL>
</SUMMARY>
<SUMMARY>
<TITLE>Clicked Through</TITLE>
<ATTEMPTED>4.10</ATTEMPTED>
<TOTAL>829</TOTAL>
</SUMMARY>
<SUMMARY>
<TITLE>Replied</TITLE>
<ATTEMPTED>0.12</ATTEMPTED>
<TOTAL>24</TOTAL>
</SUMMARY>
<SUMMARY>
<TITLE>Unsubscribed</TITLE>
<ATTEMPTED>0.25</ATTEMPTED>
<TOTAL>51</TOTAL>
</SUMMARY>
<SUMMARY>
<TITLE>Forwarded</TITLE>
<ATTEMPTED>0.00</ATTEMPTED>
<TOTAL>0</TOTAL>
</SUMMARY>
<SUMMARY>
<TITLE>Subscribed</TITLE>
<ATTEMPTED>0.00</ATTEMPTED>
<TOTAL>0.00</TOTAL>
</SUMMARY>
<SUMMARY>
<TITLE>SpamComplaints</TITLE>
<ATTEMPTED>0.3</ATTEMPTED>
<TOTAL>6</TOTAL>
</SUMMARY>
</ACTIVITY>
click_through.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited by XMLSpy® -->
<ACTIVITY>
<SUMMARY>
<URL>navbar weddings</URL>
<UNIQUE>1</UNIQUE>
<TOTAL>1</TOTAL>
</SUMMARY>
<SUMMARY>
<URL>navbar honeymoon</URL>
<UNIQUE>1</UNIQUE>
<TOTAL>1</TOTAL>
</SUMMARY>
<SUMMARY>
<URL>submit rfp</URL>
<UNIQUE>1</UNIQUE>
<TOTAL>1</TOTAL>
</SUMMARY>
</ACTIVITY>
解决方案 As alternative approach you could use simpler, non-JavaScript, browser's client side XSL tranformation, without load_xml_javascript.html
file, just add into delivery.xml
(just below XML declaration) following line:
<?xml-stylesheet type="text/xsl" href="delivery_and_activity.xsl"?>
Tested (displaying three tables) on:
- Internet Explorer 8
- Firefox 6
- Opera 11.50
- Google Chrome 13, however for local (without web server) transformations you need run browser it with
--allow-file-access-from-files
switch
- Safari 5.1
For JavaScript based solution tables (second and third) are empty in Google Chrome 13 because document()
function doesn't work properly under Webkit engine. Take a look at:
For Internet Explorer 8 (as well as 9) your simplified initial code looks:
function loadXMLDoc(dname)
{
var xhttp;
if (window.XMLHttpRequest)
xhttp = new XMLHttpRequest();
xhttp.open("GET", dname, false);
xhttp.send("");
return xhttp.responseXML;
}
function displayResult()
{
var xml = loadXMLDoc("delivery.xml");
var xsl = loadXMLDoc("delivery_and_activity.xsl");
if (window.ActiveXObject)
{
var output = xml.transformNode(xsl);
document.getElementById("example").innerHTML = output;
}
}
Use F12 to debug it, you should see error message (de facto the same issue as in here):
Access is denied
However you could try following code instead:
function loadXMLDoc(filePath)
{
var xmlDoc;
if (window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.validateOnParse = false;
xmlDoc.load(filePath);
}
return xmlDoc;
}
function displayResult()
{
var xml = loadXMLDoc("delivery.xml");
var xsl = loadXMLDoc("delivery_and_activity.xsl");
if (window.ActiveXObject)
{
var output = xml.transformNode(xsl);
document.getElementById("example").innerHTML = output;
}
}
To display page properly cut these attributes:
doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
As you see it's much easier to use browser's native XSL transformation, rather than JavaScript based.
这篇关于如何在IE 8和Chrome中使用JavaScript和三个XML文件显示XSLT?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!