在我的 jsf 应用程序中的 javascript 中，“>”和“<”被转换为“<”和“>”的奇怪问题
Posted
技术标签:
【中文标题】在我的 jsf 应用程序中的 javascript 中，“>”和“<”被转换为“<”和“>”的奇怪问题【英文标题】：Strange issue with ">" and "<" being converted to "<" and ">" in javascript in my jsf app 【发布时间】：2011-09-29 23:33:43 【问题描述】：我有一些我想在 jsf 应用程序中使用的 javascript。我已经缩小了范围，这样如果我取出下面的行，一切正常，但是当我输入这些行时，我在 chrome 控制台中收到一个错误，上面写着“unexpected ;”第一行显示为if(maxdays &gt; 1000)
为什么要将大于号转换为&gt;？
if(maxdays > 1000)
maxdays = 1000;
编辑： 这是整个 JSF 页面。
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<h:head>
<title>Protocol Dashboard</title>
<link type="text/css" rel="stylesheet" href="../css/styles.css" />
<script type="text/javascript" src="../js/jquery-1.5.2.js"></script>
<script type="text/javascript" src="../js/highcharts.src.js"></script>
<script type="text/javascript">
$(document).ready(
function()
//var chartData;
//var goodData;
var chart;
var studyType;
var categories;
var maxdays;
//var chart = new Highcharts.Chart(
var options =
chart :
renderTo : 'container',
type : 'bar'
,
title :
text : 'Gantt module development plan'
,
subtitle:
text: studyType
,
xAxis :
categories : [ 'Planning', 'Development',
'Testing', 'Documentation' ]
,
yAxis :
type : 'datetime',
min : Date.UTC(2012, 0, 1),
labels :
formatter : function()
return Highcharts.dateFormat('%m/%d/%Y',
this.value);
,
tooltip :
formatter : function()
var point = this.point;
return '<b>'
+ point.category
+ '</b><br/>'
+ Highcharts.dateFormat('%b %e, %Y',
point.low)
+ ' - '
+ Highcharts.dateFormat('%b %e, %Y',
point.y);
,
series : [
data : [
low : Date.UTC(2012, 0, 1),
y : Date.UTC(2012, 0, 15)
,
low : Date.UTC(2012, 0, 10),
y : Date.UTC(2012, 4, 28)
,
low : Date.UTC(2012, 3, 15),
y : Date.UTC(2012, 4, 28)
,
low : Date.UTC(2012, 4, 15),
y : Date.UTC(2012, 4, 28)
]
,
data : [
low : Date.UTC(2012, 0, 1),
y : Date.UTC(2012, 1, 15)
,
low : Date.UTC(2012, 0, 10),
y : Date.UTC(2012, 3, 15)
,
low : Date.UTC(2012, 3, 15),
y : Date.UTC(2012, 6, 14)
,
low : Date.UTC(2012, 4, 15),
y : Date.UTC(2012, 4, 25)
]
]
;
function loadData()
//options.series.length = 0;
//options.xAxis.categories.length = 0;
$('#hiddenData').val('09-034,99|10-053,194');
$('#hiddenCategories').val('09-034|10-053');
$('#clickedMenu').val('P2C');
$('#hiddenMaxDays').val('194');
var chartData = $('#hiddenData').val();
console.log('hiddenData = '+chartData);
categories = $('#hiddenCategories').val();
console.log('hiddenCategories = '+categories);
studyType = $('#clickedMenu').val();
console.log('clickedMenu = '+studyType);
maxdays = $('#hiddenMaxDays').val();
console.log('hiddenMaxDays = '+maxdays);
console.log('maxdays = '+maxdays);
//options.yAxis.max = maxdays;
options.subtitle.text = studyType;
var goodData = chartData.split('|');
//console.log('goodData = '+goodData);
//var goodCategories = categories.split(",");
//console.log('goodCategories = '+goodCategories);
/*
var series =
data : []
;
var cat =
categories : []
;
try
$.each(goodData, function(index, value)
var goodData2 = value.split(",");
//series.name = goodData2[0];
series.data.push(parseFloat(goodData2[1]));
);
$.each(goodCategories, function(index, value)
var prot = value;
options.xAxis.categories.push(value);
);
options.series.push(series);
//console.log(options);
catch (err)
//console.log("ERROR ..." + err.description + ' message:'
//+ err.message);
*/
function loadDataAndCreateChart()
loadData();
//console.log(options);
chart = new Highcharts.Chart(options);
loadDataAndCreateChart();
);
</script>
</h:head>
<h:body>
<div id="container"></div>
<h:inputHidden value="#selectCategory.jsonResults " id="hiddenData" />
<h:inputHidden value="#selectCategory.jsonResultsCategories " id="hiddenCategories" />
<h:inputHidden value="#selectCategory.menuItem" id="clickedMenu" />
<h:inputHidden value="#selectCategory.maxDays" id="hiddenMaxDays" />
</h:body>
</html>
【问题讨论】：
您应该显示周围的 JSF 代码。发生的事情是 JSF 正在对 JavaScript 文本执行 HTML 转义。 我怎样才能让它不那样做？ 【参考方案1】：您正在使用 Facelets，它是一种基于 XML 的视图技术。 >、& 等 JavaScript 运算符在 XML 中是 special characters，在 XML 文件中用于其他目的时是非法。 Facelets 以这种方式处理它们。
我强烈建议将所有 JS 代码放在它自己的 .js 文件中，并通过 <script src> 或 <h:outputScript> 引用它。
例如
<script src="#request.contextPath/js/global.js"></script>
或
<h:outputScript name="js/global.js" />
额外的优势是您可以通过这种方式微调浏览器缓存，最终获得更高效的网站服务。
与具体问题无关：请注意我是如何引用这些库的。您应该更喜欢域相对路径而不是 URI 相对路径。使用../ 是一种维护痛苦。如果您移动视图或更改请求 URI，它将中断。
【讨论】：
很抱歉打扰您，但这在进行 IE 条件注释时无济于事。我如何避免 Facelets 为条件 cmets 转换括号？ @Buhake: ***.com/questions/8574588/… 感谢 BalusC，我确实已经看到了。我现在正在为此使用您的 OmniFaces 库。它就像一个魅力。 :-)【参考方案2】：&gt; 是必须用于在 HTML 中输出 &gt; 字符的 HTML 实体。 &lt; 和 &gt; 是 HTML 标记使用的特殊字符，因此如果必须在页面中显示这些字符，则必须转义为 &lt; 和 &gt;。我怀疑您使用的 JSF 标记会转义其输入。
我对 JSF 没有太多经验，但您可以尝试将脚本包含在 CDATA 部分中：
<script type="text/javascript">
<![CDATA[
your JavaScript code here
]]>
</script>
但最好的解决方案是根本不在 HTML 中包含 JavaScript，而是从外部文件加载它。
【讨论】：
都在 h:head 标签内 您第一次尝试在 HTML/XML 注释中使用 JS 是没有意义的。这只是 90 年代的遗留风格，当时并非所有浏览器都支持/理解 JavaScript，因此无法解析<script>，例如 Netscape 1.0 或其他东西。这些浏览器现在都不应该再使用了。虽然我不确定 CDATA 解决方案，但这不如将 JS 束重构为自己的 .js 文件。
@BalusC：虽然我同意它不再有用，但我已经使用这个技巧让 XHTML 代码针对 w3c 验证器进行验证。所以它仍然有它的实用性（尽管现在 CDATA 部分可能更干净）
这个答案是正确的，但它应该是这样评论的： 以上是关于在我的 jsf 应用程序中的 javascript 中，“>”和“<”被转换为“<”和“>”的奇怪问题的主要内容，如果未能解决你的问题，请参考以下文章
JSF 1.1-不刷新页面调用backing bean的动作方法（通过ajax/javascript）
如何将 JavaScript 变量作为参数传递给 JSF 操作方法？