我有这个xsl
文件:
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html"/>
<xsl:template match="/scenario">
<html>
<head>
<script type="text/javascript" src="html5.js"> </script>
<script type="text/javascript" src="jquery.min.js"> </script>
<script type="text/javascript" src="jquery.details.js"> </script>
<script type="text/javascript">
<xsl:text>
window.console || (window.console = { 'log': alert });
$(function() {
$('html').addClass($.fn.details.support ? 'details' : 'no-details');
$('body').prepend($.fn.details.support ? 'Native support detected; the plugin will only add ARIA annotations and fire custom open/close events.' : 'Emulation active; you are watching the plugin in action!');
$('details').details();
$('details').on({
'open.details': function() {
console.log('opened');
},
'close.details': function() {
console.log('closed');
}
});
});
</xsl:text>
</script>
<style type="text/css">
body {
font-size: 90%
}
.mainScenario {
padding : 10px;
border: 2px solid #002588;
}
.mainScnName {
font-weight: bold;
font-size: larger;
color : #6632ff;
}
.mainScnDesc {
font-weight: bold;
font-size: larger;
color : #3312aa;
}
.subScenario {
border: 2px solid #0032ff;
padding : 10px;
}
.subScnName {
font-weight: bold;
font-size: larger;
color : #6632ff;
}
.subScnDesc {
font-weight: bold;
font-size: larger;
color : #3312aa;
}
.command {
margin-left : 20px;
}
</style>
</head>
<body>
<div class="mainScenario">
<pre>
<b><xsl:value-of select="./greeting"/></b>
<details>
<summary class="mainScnName">Name: <xsl:value-of select="@name"/></summary>
<p class="mainScnDesc">Description: <xsl:value-of select="@description"/></p>
<xsl:for-each select="./*">
<xsl:apply-templates select="."/>
</xsl:for-each>
</details>
</pre>
</div>
</body>
</html>
</xsl:template>
<xsl:template match="scenario">
<div class="subScenario">
<b><xsl:value-of select="./greeting"/></b>
<pre>
<details>
<summary class="subScnName">Name: <xsl:value-of select="@name"/></summary>
<p class="subScnDesc">Description: <xsl:value-of select="@description"/></p>
<xsl:for-each select="./*">
<xsl:apply-templates select="."/>
</xsl:for-each>
</details>
</pre>
</div>
</xsl:template>
</xsl:stylesheet>
firefox中Javascript和JS文件导入部分的输出是:
<script type="text/javascript" src="html5.js"><script type="text/javascript" src="jquery.min.js"/><script type="text/javascript" src="jquery.details.js"/><script type="text/javascript">
window.console || (window.console = { 'log': alert });
$(function() {
$('html').addClass($.fn.details.support ? 'details' : 'no-details');
$('body').prepend($.fn.details.support ? 'Native support detected; the plugin will only add ARIA annotations and fire custom open/close events.' : 'Emulation active; you are watching the plugin in action!');
$('details').details();
$('details').on({
'open.details': function() {
console.log('opened');
},
'close.details': function() {
console.log('closed');
}
});
});
</script>
我不知道解析器为什么假设所有标签都是第一个标签的子项!!!
我应该提一下,脚本试图在firefox和IE中启用details
标记。我从this url复制了它们。此示例适用于我的计算机。
编辑1:
我已将行<xsl:output method="html"/>
更改为<xsl:output method="html" omit-xml-declaration="yes/>
;但它不会影响呈现的HTML文件。其次,我在空<xsl:comment/>
标记之间添加了script
;这个尝试渲染标签,如我所愿:
<script type="text/javascript" src="html5.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.details.js"></script>
<script type="text/javascript">
window.console || (window.console = { 'log': alert });
$(function() {
$('html').addClass($.fn.details.support ? 'details' : 'no-details');
$('body').prepend($.fn.details.support ? 'Native support detected; the plugin will only add ARIA annotations and fire custom open/close events.' : 'Emulation active; you are watching the plugin in action!');
$('details').details();
$('details').on({
'open.details': function() {
console.log('opened');
},
'close.details': function() {
console.log('closed');
}
});
});
</script>
但是还有一个问题;脚本不起作用。
编辑2:
好吧,我终于开始工作了;解决js文件时出现问题。我还在<head>
标记中添加了一些样式,如下所示:
<style>
summary { cursor: pointer; }
.no-details details > * { display: none; }
.no-details details > summary:before { float: left; width: 20px; content: '► '; }
.no-details details.open > summary:before { content: '▼ '; }
.no-details details summary { display: block; }
</style>
我在<meta charset="utf-8"/>
之后的第一行添加了<head>
。箭头符号未显示在页面中。字符编码有什么问题吗?
编辑3:
我也试过<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
;没有改变。
答案 0 :(得分:1)
在HTML脚本中,标签不是自动关闭的。尝试指定输出方法,我看到你做了,但你还需要省略xml声明:
<xsl:output method="html" omit-xml-declaration="yes"/>
这也意味着img
标签等不是自我封闭的,应该没问题。
不太理想的解决方法是
<script src="..."><xsl:comment/></script>
但这会使您的HTML遗留下来<!-- -->
条评论。
答案 1 :(得分:0)
也许解决方法就是这样:
<script src="//whatever.com/script.js"> </script>
编辑:
<script src="//whatever.com/script.js"> </script>