Question

探索Google的+1按钮，我发现他们提供的代码有两个奇怪之处：</ p>

<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>

所以我有两个问题：
首先： Google如何在script代码之间使用文字？ 第二：语法<g:plusone ... HTML是否有效？这叫什么？

Answer 1

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>

谷歌的狡猾手段是将内容放在具有外部<script>的{{1}}内。在这种情况下，src会覆盖块内的内容并改为执行外部脚本，但src元素的内容仍可通过DOM读取，即使它们什么都不做。

语法<script> ... HTML有效吗？这叫什么？

没有。如果他们为HTML + plusone创建了自己的doctype，那么它可能是那个，但它不符合HTML的有效性，甚至在XHTML文档中也没有完整的命名空间，除非你也为它添加了额外的<g:plusone。

Answer 2

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

没有

这叫什么？

psuedo-namespaces无效

Answer 3

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

在您的问题中，此模式允许每个外部客户端脚本使用（至少）其自己的本地化设置，并允许服务器端代码呈现该参数作为呈现<script>的副作用元素本身。这令人印象深刻。

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

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

谷歌的+1按钮：他们是如何做到的？

3 个答案: