使用 # 和 . 是否安全？ html属性中的字符？答案

【问题标题】：Is it safe to use # and . characters in html attributes?使用 # 和 . 是否安全？ html属性中的字符？
【发布时间】：2013-09-04 01:46:34
【问题描述】：

我想知道是否可以将 HTML 对象的属性值设置为包含# 字符的字符串？

我想这样做的原因是页面会有很多项目应该滚动页面到指定的元素，我想存储数据'它应该滚动到哪个项目？ ' 作为数据滚动属性。

所以我的 JavaScript 代码将如下所示：

function ScrollToElement(lm)
{
    var theTop  = lm.offset().top;
    $("html,body").animate({
        scrollTop: theTop/*,
        scrollLeft: 1000*/
    });
}

// .. and add click event to all such objects : 
$('.scroller').click(function(){
        var theSelector = $(this).attr('data-scrollto');
        ScrollToElement($(theSelector));
    });

所以 html 元素看起来像：

<a class='scroller' data-scrollto='p#p-to-scroll'>Click to scroll to p</a>

安全吗？

作为一个附带问题，为什么

$(element).data('scrollto');

没用，但是

$(element).attr('data-scrollto');

有效吗？

【问题讨论】：

是的，它是安全的。不过可能不是很优雅，因为您将逻辑和演示混为一谈。
为什么是p#p-to-scroll？仅仅#p-to-scroll 还不够吗？
@dystroy 你是对的，我正在为自己创建一个投资组合，我想要一个简单的导航。对我来说，一一添加所有 click() 似乎太多了，我想保持 javascript 不变，同时更改 html 元素。有没有更好的办法？
@u_mulder 当然可以，但如果它有效，它可以双向有效，对吧？
我支持@dystroy。 . .我建议使用ScrollToElement($("#" + theSelector)); 而不是ScrollToElement($(theSelector));，并且让data-scrollto 值只是目标元素的id 属性。这会将数据与逻辑分开。

标签： javascript jquery html scroll

【解决方案1】：

根据 W3C 规范，是的，使用 U+0023 NUMBER SIGN 字符 (#) 和 U+002E FULL STOP 字符 (.) 是安全的。

属性名称，后跟零个或多个空格字符，后跟单个U+003D EQUALS SIGN 字符，后跟零个或多个空格字符，然后是属性值，除了上述对属性值的要求外, 不得包含任何文字空格字符、任何 U+0022 QUOTATION MARK 字符 (")、U+0027 APOSTROPHE 字符 (')、U+003D EQUALS SIGN 字符 (=)、U+003C LESS-THAN SIGN 字符 (@987654334 @)、U+003E GREATER-THAN SIGN 字符 (>) 或 U+0060 GRAVE ACCENT 字符 (`)，且不得为空字符串。

阅读http://www.whatwg.org/specs/web-apps/current-work/multipage/syntax.html#attributes-0。

【讨论】：

【解决方案2】：

是的，您可以在数据属性中存储哈希 # 和 .。您应该使用正确的数据方法。 http://api.jquery.com/jQuery.data/

var theSelector = $(this).data('scrollto');

如果你似乎无法使用 data 方法，请检查你使用的 jQuery 版本，它是在 1.2.3 版本中引入的

【讨论】：

OP 似乎在让$.data 工作时遇到了一些问题，只能使用$.attr 获取数据。 @Cengiz：这是一个展示两者的 jsfiddle：jsfiddle.net/sS9eF 但你真的应该使用$.data。如果它不起作用，则可能是您的 HTML 有问题，或某些浏览器兼容性问题。
想知道 OP 是否使用过时版本的 jQuery？
$.data 方法在不实际更改 DOM 节点的情况下存储数据，因此您不会在 DOM 检查器中看到更改。 $.attr 确实改变了节点；我想知道这是否是 OP 所看到的？
@JustinBicknell 可能，[@]Mathletics 可能 :) 我只记得 $.data 有些东西不起作用，但 $.attr 总是起作用，所以我从来没有使用过 $.data :) 是不是错了?
@CengizFrostclaw - 我必须更多地了解您在使用 data 时遇到的问题，但是无论何时您存储和检索数据，使用它比使用它更有意义 attr .另外，您可以在内存对象中引用，而不仅仅是使用 data 的字符串。