web-dev-qa-db-ja.com

JSスクリプトタグを記述するGoogle AMPの最適な方法

スクリプトタグに関するすべてのドキュメントを読みましたが、「タイプがapplication/ld+jsonでない限り、スクリプトタグは禁止されています」とはいえ、AMP HTMLページでスクリプトタグを記述する方法を見つけることができません。いくつかのデフォルトのAMPランタイムコンポーネントと、さまざまなコンポーネントの特定のフォームを含む拡張コンポーネントがあります。

AMP HTMLでカスタムjsの特定のフォームを見つけることができませんでした。スクリプトタグは次のとおりです。

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

AMPの全体的なポイントは、Webテクノロジーのサブセットのみがページのスローを停止できるようにすることです。

多くの場合、JavaScriptはWebサイトの速度低下の原因であるため、AMPページでは許可されません（AMPスクリプト自体を除く）。

したがって、Javascriptを使用する場合は、いくつかの選択肢があります。

  1. AMPを使用しないでください。誰もあなたにこれを強制していません。
  2. Ampドキュメントからスクリプトタグを削除し、その機能なしでライブします。
  3. JavaScriptと同じ機能を持つampコンポーネントを見つけて、代わりに使用します。合法ではないlegaltext.jsという名前で、Cookie通知のような合法的なテキストが表示されるので、おそらく amp-user-notification ウィジェットが代わりに機能するのでしょうか？
  4. amp iframe でJavascriptを使用します。これらはampページで許可されますが、メインページの速度が低下しないように、より低い優先度でロードされると考えられます。
30
Barry Pollard

<script>タグは通常、AMPでは許可されていません。 AMPプロジェクトの一部として構築された少数の外部javascriptファイルがあり、これらは許可され、場合によっては必須です。それ以外は、javascriptは許可されていません。カスタムスクリプトタグは、AMPでは使用できません。

4
Gregable

AMPページでカスタムJavascriptを使用するには、Javascriptファイルに記述してください（例：amp-iframe-0.1.js）。次に、このスクリプトを<head>：<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>に追加します

Amp-iframeを使用してカスタムjavascriptを呼び出すことができます。例えば。：

<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、私は同じ問題を抱えていたので、私にとって最良の方法は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はアプリを非同期にレンダリングし、誰もが幸せです：-））

それが役に立てば幸い！

1
Petr Tomášek

公式ドキュメント で述べられているように、AMPがネイティブにjavascriptをサポートしているため、amp-iframeを使用する必要はありません。

AMPページは、次のように<amp-script>コンポーネントを介してカスタムJavaScriptをサポートします。

<!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>
0
Divyesh Kanzariya