Google's +1按钮:他们是怎么做的?

Google's +1 Button: How do they do it?

本文关键字：他们是 按钮 Google      更新时间：2023-09-26

探索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有效吗?这叫什么?

谷歌如何能够使用脚本标签之间的文本?

<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的鬼鬼祟祟的技巧是将内容放在具有外部src的<script>中。在这种情况下，src覆盖块内的内容并执行外部脚本，但是<script>元素的内容仍然可以通过DOM读取，即使它们不做任何事情。

的语法是<g:plusone…HTML有效吗?这叫什么?

。如果他们为HTML+plus制作了自己的doctype，那么可能是有效的，但它不满足HTML的有效性，并且在XHTML文档中甚至不是名称空间格式良好的，除非您为它添加额外的xmlns:g。

语法是否为<g:plusone…HTML有效吗?

没有

这叫什么?

无效psuedo-namespaces

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

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

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

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

相关文章：