javascript - Google 的 +1 按钮 : How do they do it?

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 之间的文本标签？
第二: 是语法 <g:plusone ... HTML 有效吗？这叫什么？

Answer 1

How is Google able to use the text between the script tags?

<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覆盖 block 内的内容并改为执行外部脚本，但是 <script> 的内容元素仍然可以通过 DOM 读取，即使它们什么都不做。

Is the syntax <g:plusone ... HTML valid? What's this called?

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