Google AMP лучший способ написать тег JS script

Я прочитал всю документацию о теге script, но не могу найти, как писать тег script на странице HTML AMP, хотя я знаю, что тег script запрещен, если только тип application/ld+json ". У них есть некоторые компоненты времени выполнения AMP по умолчанию и расширенные компоненты, которые содержат конкретную форму для разных компонентов.

Я не мог найти, что такое конкретная форма для пользовательских js в AMP HTML. Вот мой тег script:

<script src="https://arifkarim.com/widget/layouts/global/js/legaltext.js"></script>

Ответ 1

Весь смысл AMP заключается в том, чтобы разрешить подмножество веб-технологий останавливать медленную работу вашей страницы.

Javascript часто является причиной медленных веб-сайтов, поэтому страницы AMP не позволяют им (за исключением самих скриптов AMP), хотя они пытались заполнить пробел, который уходит с компонентами усилителя, которые специально написаны, чтобы их не было медленно.

Итак, если вы хотите использовать Javascript, у вас есть несколько вариантов:

Не используйте AMP. Никто не заставляет вас на вас.
Удалите тег script из вашего документа amp и живите без этой функции.
Найдите amp-компонент, который делает то же самое, что и ваш JavaScript, и используйте его вместо этого. Не имея понятия, что legaltext.js я бы угадал по имени, он отображает какой-то юридический текст, например, уведомление об cookie, поэтому, возможно, вместо этого будет виджет amp-user-notification?
Используйте Javascript в amp iframe. Они разрешены на страницах amp, но предположительно будут загружены с более низким приоритетом, чтобы гарантировать, что они не замедляют основную страницу.

Ответ 2

Теги

<script> обычно не допускаются в AMP. Существует несколько внешних файлов javascript, созданных как часть проекта AMP, которые разрешены и даже необходимы в некоторых случаях. Кроме того, javascript не разрешен. Пользовательские теги script невозможны с AMP.

Ответ 3

Чтобы использовать пользовательский Javascript на странице AMP, вы должны записать его в файл Javascript (например, amp-iframe-0.1.js). Затем добавьте этот script в <head>: <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

Пользовательский javascript можно вызвать с помощью amp-iframe. Например:

<amp-iframe width=300 height=300
    sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
    layout="responsive"
    frameborder="0"
    src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&q=Alameda,%20CA">
</amp-iframe>

Ответ 4

Хорошо, у меня была та же проблема, и лучший способ для меня - использовать iframe, который будет воспроизводиться асинхронно. Это означает, что вы можете решить это, например, так:

API на стороне сервера: Запрос GET (например, /api/frames/my-js-script-app). После звонка вы получите следующий код:

<html>
<head>
   <script defer src="your_js_scripts"></script>
</head>
<body>
  <!-- html code which using your javascript, if exists... --!>
</body>
</html>

Добавьте рамочную библиотеку AMP в свое приложение:

 <head>
 ...
 <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
 </head>

Теперь вы можете использовать в своем теле это:

<amp-iframe width=500 height=300
    sandbox="allow-scripts allow-same-origin"
    layout="responsive"
    frameborder="0"
    src="https://localhost/api/frames/my-js-script-app">
</amp-iframe>

Будьте осторожны с созданием API на вашем сервере. Для фрейма AMP требуется https связь - это означает что-то вроде этого: https://localhost/api/frames/my-js-script-app

Теперь amp выполнит рендеринг вашего приложения асинхронно, и все будут довольны :-))

Надеюсь, это поможет!

Ответ 5

Теперь нет необходимости использовать amp-iframe, поскольку AMP изначально поддерживает javascript, как указано в официальном документе

Страницы AMP поддерживают пользовательский JavaScript с помощью компонента <amp-script>, как показано ниже:

<!doctype html>
<html ⚡>
<head>
  ...
  <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
<body>  
  ...
  <amp-script layout="container" src="https://example.com/myfile.js">
    <p>Initial content that can be modified from JavaScript</p>
  </amp-script>
  ...
</body>
</html>