默认情况下，JSF生成不可用的ID，这些ID与Web标准的CSS部分不兼容

编程入门行业动态更新时间:2024-10-05 13:28:50

本文介绍了默认情况下，JSF生成不可用的ID，这些ID与Web标准的CSS部分不兼容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

活跃的JSF(或Primefaces)用户是否可以解释为什么默认情况下会发生这种情况，为什么没人对此做任何事情?

Can someone who is an active JSF (or Primefaces) user explain why by default this happens why nobody is doing anything about it:

<p:commandLink id="baz" update=":foo:boop" value="Example" />

哪个生成的标记不能在没有骇客的情况下在JavaScript或CSS中使用，通常应被视为无效:

Which generates markup that cannot be used in JavaScript or CSS without hacks and should generally be considered invalid:

<a href="javascript:void(0);" id=":foo:bar:baz">Example</a>

此处的id=":bar:baz:foo"属性包含冒号，至少从CSS角度来看，冒号不是此属性的有效字符.

The id=":bar:baz:foo" attribute here contains colons, which aren't a valid character for this attribute, at least from CSS perspective.

虽然该属性根据规范可能是有效的，但它无法与实际的JavaScript和CSS实现一起使用.

While the attribute may be valid according to spec, it fails to work with real-world JavaScript and CSS implementations.

简而言之，JSF中默认的id属性生成不可用于前端开发.

In short, default id attribute generation in JSF is unusable for front-end development.

推荐答案

之所以选择:是因为，这是唯一可以确保最终用户不会在JSF组件ID中意外使用它的明智的分隔符( validated )，并且可以通过在\中转义来在CSS选择器中使用它.

The : is been chosen because that's the only sensible separator character for which can be guaranteed that the enduser won't accidently use it in JSF component IDs (which is been validated) and that it's possible to use it in CSS selectors by escaping it with \.

请注意， HTML4规范表示冒号是id和name属性中的有效值.因此，您抱怨它与网络标准"不兼容的地方无济于事.

Note that the HTML4 spec says that the colon is a valid value in id and name attribute. So your complaint that it isn't compatible with "web standards" goes nowhere.

ID 和 NAME 令牌必须以字母([A-Za-z])开头，后可以跟任意数量的字母，数字([0- 9])，连字符(-")，下划线("_")，冒号(:")和点号(.").

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

因此，唯一的问题是:是CSS选择器中的特殊字符，需要转义. JS本身对冒号没有任何问题. document.getElementById("foo:bar")可以很好地工作.唯一可能的问题是在jQuery中，因为它使用CSS选择器语法.

The only problem is thus that the : is a special character in CSS selectors which needs to be escaped. JS has at its own no problems with colons. The document.getElementById("foo:bar") works perfectly fine. The only possible problem is in jQuery because it uses CSS selector syntax.

如果确实需要，则可以始终通过将javax.faces.SEPARATOR_CHAR上下文参数设置为例如来更改默认的分隔符:. -或_如下.您只需要保证在JSF组件ID 您自己中没有在任何地方使用该字符(未经验证！).

If you really need to, then you can always change the default separator character : by setting the javax.faces.SEPARATOR_CHAR context param to e.g. - or _ as below. You only need to guarantee that you don't use that character anywhere in JSF component IDs yourself (it's not been validated!).

<context-param> <param-name>javax.faces.SEPARATOR_CHAR</param-name> <param-value>-</param-value> </context-param>

_的另一缺点是它会在诸如j_id1之类的JSF自动生成的ID中发生，因此，您还应确保 all NamingContainer 组件具有固定ID，而不是自动生成的ID.否则，JSF将无法找到命名容器子代的名称.

The _ has by the way the additional disadvantage that it occurs in JSF autogenerated IDs like j_id1, thus you should also ensure that all NamingContainer components throughout your JSF pages have a fixed ID instead of an autogenerated one. Otherwise JSF will have problems finding naming container children.

我只会推荐它.从长远来看，这是令人困惑和脆弱的.再想一想，普通JSF Web应用程序中的独特元素本身通常已经不在表格或表中.它们通常仅代表主要布局方面.我要说，否则，从一般的HTML/CSS角度来看，这是一个糟糕的设计.只需通过可重用的CSS类名称而不是ID来选择它们.如果确实需要，可以始终将其包装为纯HTML <div>或<span>，其ID不会由JSF前缀.

I would only not recommend it. It's in long term confusing and brittle. To think about it again, unique elements in the average JSF webapp are by itself usually already not inside forms or tables. They generally just represent the main layout aspects. I'd say, it's otherwise a bad design in general HTML/CSS perspective. Just select them by reusable CSS class names instead of IDs. If you really need to, you can always wrap it in a plain HTML <div> or <span> whose ID won't be prepended by JSF.