web-dev-qa-db-fra.com

Google AMP meilleure façon d'écrire une balise de script JS

J'ai lu toute la documentation sur les balises de script, mais je ne trouve pas comment écrire une balise de script dans la page HTML AMP, même si je sais que "la balise de script est interdite, sauf si le type est application/ld+json". Ils ont des composants d'exécution AMP et des composants étendus par défaut qui contiennent une fiche spécifique pour différents composants. 

Je ne pouvais pas trouver quelle est la forme spécifique pour les js personnalisés en AMP HTML. Voici ma balise script:

<script src="https://arifkarim.com/widget/layouts/global/js/legaltext.js"></script>
amp-html
14
Fazlul Karim

Le but de AMP est de ne permettre qu’à un sous-ensemble de technologies Web d’empêcher la lenteur de votre page.

Javascript est souvent la cause de la lenteur des sites Web et les pages AMP ne les autorisent pas (à l'exception des scripts AMP eux-mêmes), bien qu'ils aient tenté de combler le vide laissé par les composants d'amplis spécialement écrits pour ne pas être lents.

Donc, si vous voulez utiliser Javascript, vous avez plusieurs choix:

  1. Ne pas utiliser AMP. Personne ne vous oblige à le faire.
  2. Supprimez la balise script de votre document d'ampli et restez autonome sans cette fonctionnalité.
  3. Trouvez un composant d'ampli qui fait la même chose que votre JavaScript et utilisez-le à la place. N'ayant pas la moindre idée de ce que legaltext.js je devinerais par son nom, il affiche un texte légal ressemblant à une notification de cookie afin que le widget amp-user-notification fonctionne plutôt?
  4. Utilisez votre Javascript dans un amp iframe . Celles-ci sont autorisées dans les pages d'amplis, mais seront probablement chargées avec une priorité plus faible afin de ne pas ralentir la page principale.
28
Barry Pollard

Les tags <script> ne sont généralement pas autorisés dans AMP. Il existe une poignée de fichiers javascript externes, construits dans le cadre du projet AMP, qui sont autorisés et même requis dans certains cas. En dehors de ceux-ci, javascript n'est pas autorisé. Les balises de script personnalisées ne sont pas possibles avec AMP.

4
Gregable

Pour utiliser le code Javascript personnalisé dans la page AMP, vous devez l'écrire dans un fichier Javascript (par exemple: amp-iframe-0.1.js ). Ajoutez ensuite ce script à <head>: <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

Le javascript personnalisé peut être appelé en utilisant amp-iframe. Par exemple.: 

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

Ok, j'ai eu le même problème et le meilleur moyen pour moi est d'utiliser iframe, quel ampli sera rendu de façon asynchrone. Cela signifie que vous pouvez le résoudre par exemple comme ceci: 

API côté serveur: demande GET (par exemple / api/frames/my-js-script-app). Après l'appel, vous obtiendrez le code suivant:

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

Ajouter une bibliothèque d'images AMP à votre application:

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

Maintenant, vous pouvez utiliser dans votre corps ceci:

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

Soyez prudent avec la création de l'API sur votre serveur. Le cadre AMP a besoin de https communication - cela signifie quelque chose comme ceci: https: // localhost/api/frames/my-js-script-app

Maintenant, amp rendra votre application de manière asynchrone et tout le monde sera content :-))

J'espère que ça aide!

1
Petr Tomášek