Google的+1按钮：他们如何做到这一点？ [英] Google's +1 Button: How do they do it?

问题描述

探索Google的+1按钮，我发现它们提供的代码有两处奇怪：

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

所以我有两个问题：

第一：        Google如何使用脚本第二：语法< g：plusone ... HTML有效吗？这是怎么回事？ Google如何在脚本标记之间使用文本？

/ p>


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

语法 元素仍然可以通过DOM读取，即使它们什么也不做。 ：plusone ... HTML有效吗？这是什么？

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

Exploring Google's +1 Button, I found two things odd about the code they supply:

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

So I have two questions:
First:       How is Google able to use the text between the script tags?
Second:  Is the syntax <g:plusone ... HTML valid? What's this called?

解决方案

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

<script> elements are perfectly visible in the 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's sneaky trick is to put content in a <script> that has an external src. In this case the src overrides the content inside the block and executes the external script instead, but the contents of the <script> element are still readable through the DOM even though they do nothing.

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

No. If they made their own doctype for HTML+plusone it could be valid that, but it doesn't satisfy validity for HTML, and it isn't even namespace-well-formed in an XHTML document, unless you add an extra xmlns:g for it too.

这篇关于Google的+1按钮：他们如何做到这一点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！