Кнопка Google +1: как они это делают?

Изучая кнопку Google +1, я обнаружил две вещи нечетные в отношении кода, который они поставляют:

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

<g:plusone size="tall" href="#" onclick="location.href='http://www.google.com'; return false;"></g:plusone>

Итак, у меня есть два вопроса:
В первую очередь:               Второй: Является ли синтаксис <g:plusone ... HTML действительным? Что это называется?

Ответы

Ответ 1

Как Google может использовать текст между тегами script?

Элементы

<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 sneaky трюк заключается в размещении контента в <script>, который имеет внешний src. В этом случае src переопределяет содержимое внутри блока и вместо этого выполняет внешний script, но содержимое элемента <script> все еще читается через DOM, даже если они ничего не делают.

Является синтаксисом <g:plusone... HTML действительным? Что это называется?

Нет. Если бы они сделали свой собственный doctype для HTML + plusone, это могло бы быть справедливым, но оно не удовлетворяет действительности для HTML, и это даже не пространство имен, хорошо сформированное в документе XHTML, если вы не добавите дополнительный xmlns:g для него тоже.

Ответ 2

Является ли синтаксис <g:plusone... HTML действительным?

Нет

Что это называется?

Недопустимые пространства имен psuedo

Ответ 3

Первый трюк интересен. Это похоже на творческий способ передать "глобальные" аргументы из разметки страницы во внешние скрипты. Есть способы, чтобы найти элемент <script>, который запускает текущий код, и я не удивлюсь, если бы был доступен внутренний текст этого элемента <script> из DOM, хотя браузер игнорирует его.

В вашем вопросе этот шаблон позволяет каждой внешней клиентской стороне script использовать (по крайней мере) свои собственные параметры локализации, а также позволяет серверному коду отображать этот параметр как побочный эффект рендеринга <script> самого элемента. Это впечатляет.

Второй трюк, я не так уверен. В основном, я думаю, что большинство браузеров рассматривают элемент с именами <g:plusone> как неизвестный или даже недействительный, поэтому они должны отображать его содержимое, но он ничего не сделает, конечно, поскольку этот элемент пуст для начала.

Тем не менее, клиентский код может по-прежнему иметь возможность сопоставлять элемент с пространством имен с использованием DOM-навигации и заменять его собственным созданным контентом.

Ответ 4

  • Возможно, это JSON, и они получают доступ к нему через DOM
  • Это XHTML действительный