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

Question

在探索 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>

所以我有两个问题：
第一：       Google 如何使用 script 标记之间的文本？
第二：  语法 HTML 有效吗？这叫什么？

Answer 1

Google 如何使用脚本标记之间的文本？

<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 的狡猾伎俩是将内容放入具有外部 src 的

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




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

Answer 2

语法 ... HTML 有效吗？




不

这叫什么？

无效的伪命名空间

Answer 3

第一个技巧很有趣。它看起来像是一种将“全局”参数从页面标记传递到外部脚本的创造性方法。有方法来查找获取当前正在运行的代码的

在您的问题中，此模式允许每个外部客户端脚本（至少）使用自己的本地化设置，并且还允许服务器端代码渲染该参数作为渲染

第二个技巧，我不太确定。基本上，我认为大多数浏览器都会将命名空间 元素视为未知甚至无效，因此它们应该 渲染其内容，但当然它不会执行任何操作，因为该元素一开始就是空的。

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