javascript - link - Botón+1 de Google: ¿Cómo lo hacen?

title html css

Question

Al explorar el botón +1 de Google, encontré dos cosas extrañas sobre el código que suministran:

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

Así que tengo dos preguntas:
Primero: ¿Cómo puede Google usar el texto entre las etiquetas de script ?
Segundo: ¿Es la sintaxis <g:plusone ... HTML válido? ¿Cómo se llama esto?

Answer 1

¿Cómo puede Google utilizar el texto entre las etiquetas de script?

<script> elementos <script> son perfectamente visibles en el 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>

El truco astuto de Google es poner el contenido en un <script> que tenga un src externo. En este caso, el src anula el contenido dentro del bloque y ejecuta el script externo en su lugar, pero el contenido del elemento <script> todavía se puede leer a través del DOM, aunque no haga nada.

¿Es la sintaxis <g:plusone ... HTML válido? ¿Cómo se llama esto?

No. Si hicieron su propio tipo de documento para HTML + plusone, podría ser válido, pero no satisface la validez de HTML, y ni siquiera está bien formado por el espacio de nombres en un documento XHTML, a menos que agregue un xmlns:g adicional xmlns:g para eso también.

Answer 2

¿Es la sintaxis <g:plusone ... HTML válido?

No

¿Cómo se llama esto?

Psuedo-namespaces no válido

Answer 3

El primer truco es interesante. Parece una forma creativa de pasar argumentos "globales" del marcado de la página a scripts externos. Hay ways de encontrar el elemento <script> que origina el código que se está ejecutando actualmente, y no me sorprendería si el texto interno de ese elemento <script> fuera accesible desde el DOM aunque el navegador lo ignore.

En su pregunta, este patrón permite que cada script externo del lado del cliente use (al menos) su propia configuración de localización, y también permite que el código del lado del servidor represente ese parámetro como un efecto secundario de la representación del elemento <script> . Eso es impresionante.

El segundo truco, no estoy tan seguro. Básicamente, creo que la mayoría de los navegadores consideran que el elemento <g:plusone> nombre es desconocido o incluso inválido , por lo que deberían mostrar su contenido, pero no hará nada, por supuesto, ya que el elemento está vacío para empezar.

Sin embargo, el código del lado del cliente aún podría ser capaz de coincidir con el elemento de espacio de nombre mediante la navegación DOM, y reemplazarlo con su propio contenido generado.