16

探索 Google 的 +1 按钮,我发现他们提供的代码有两点奇怪:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'en-GB'}
</script>

<g:plusone size="tall" href="http://www.google.com"></g:plusone>

所以我有两个问题:
第一:       谷歌如何能够使用script标签之间的文本?
第二:  语法<g:plusone ...HTML 是否有效?这叫什么?

4

3 回答 3

12

Google 如何使用脚本标签之间的文本?

<script>元素在 DOM 中完全可见:

<script type="text/javascript">//FIRST SCRIPT BLOCK</script>

<script type="text/javascript">
    var s= document.getElementsByTagName('script')[0];
    alert(s.textContent); // "//FIRST SCRIPT BLOCK"
</script>

Google 的诡计是将内容放入<script>具有外部src. 在这种情况下,src覆盖块内的内容并改为执行外部脚本,但<script>元素的内容仍然可以通过 DOM 读取,即使它们什么都不做。

语法<g:plusone... HTML 有效吗?这叫什么?

不,如果他们为 HTML+plusone 制作了自己的文档类型,那它可能是有效,但它不满足 HTML 的有效性,而且它甚至不是 XHTML 文档中的命名空间格式良好,除非您添加额外xmlns:g的它也。

于 2011-07-15T21:30:53.707 回答
2

语法<g:plusone... HTML 有效吗?

这叫什么?

无效的伪命名空间

于 2011-07-15T21:20:08.173 回答
2

第一个技巧很有趣。它看起来像是一种将“全局”参数从页面标记传递到外部脚本的创造性方式。有多种方法可以找到<script>源代码当前运行的元素,如果该<script>元素的内部文本可以从 DOM 访问,即使浏览器忽略它,我也不会感到惊讶。

<script>在您的问题中,此模式允许每个外部客户端脚本(至少)使用自己的本地化设置,并且还允许服务器端代码将该参数呈现为呈现元素本身的副作用。这很让人佩服。

第二个技巧,我不太确定。基本上,我认为大多数浏览器会将命名空间<g:plusone>元素视为未知甚至无效,因此它们应该呈现其内容,但它当然不会做任何事情,因为该元素一开始就是空的。

但是,客户端代码可能仍然能够使用 DOM 导航匹配命名空间元素,并将其替换为自己生成的内容。

于 2011-07-15T21:33:23.953 回答