web-dev-qa-db-ja.com

AMPページにJavascriptを追加する

AMP（Accelerated Mobile Pages）にJavaScriptを追加する方法を理解するのを手伝ってください。私の要件は、URLにIDを取得することです。例えばlocalhost：8080/home？id = 1.htmlファイルでそのidにアクセスしたいです。

または、javascriptファイルを追加する方法を教えてください。

ありがとうございました。

javascriptamp-html
8
Charan R

残念ながら、AMPに任意のスクリプトを追加することはできません。 仕様 から、「HTMLタグ」の下で、タグscriptに対して：

タイプがapplication/ld+jsonでない限り禁止されています。 （必要に応じて、その他の非実行可能値を追加できます。）例外は、AMPランタイムをロードする必須のスクリプトタグと、拡張コンポーネントをロードするスクリプトタグです。

したがって、AMPからJavaScriptを使用する場合は、AMPの事前定義済みの components を使用する必要があります。あなたがしたいことをするコンポーネントが見当たりません。

7
Andrew

私の知る限り、OriginでAMPスクリプトをホストし、Service Workerを使用してスクリプトを取得するリクエストをインターセプトすることにより、JavascriptをAMPに追加できます。この手法は「AMP as PWA」と呼ばれます。ここにコードがあります

function createCompleteResponse (header, body) {
  return Promise.all([
    header.text(),
    getTemplate(RANDOM STUFF AMP DOESN’T LIKE),
    body.text()
  ]).then(html => {
    return new Response(html[0] + html[1] + html[2], {
      headers: {
        'Content-Type': 'text/html'
      }
    });
  });
}

詳細はこちら： https://www.smashingmagazine.com/2016/12/progressive-web-amps/#amp-as-pwa

4
Ngoc Nguyen

2019年4月11日 公式発表 、

amp-scriptコンポーネントを使用してAMPプロジェクト内でJSを使用できるようになりました。

まず、プロジェクトにインポートする必要があります。

  1. .htmlファイルインポートの上部：
<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
  1. html element/sをamp-scriptコンポーネントでラップします。
<!-- hello-world.html -->
<amp-script layout="container" src="https://yourdomain.com/hello-world.js">
  <button id="hello">Insert Hello World!</button>
</amp-script>
  1. これで、JSファイルを作成できます
// hello-world.js
const button = document.getElementById('hello');
button.addEventListener('click', () => {
  const el = document.createElement('h1');
  el.textContent = 'Hello World!';
  // `document.body` is effectively the <amp-script> element.
  document.body.appendChild(el);
});

AMP git repo amp-script.md で詳細と動作を確認できます。

1
Blue Bot

JavascriptはDOMの構築をブロックし、ページのレンダリングを遅らせるため、AMPは非同期Javascriptのみを許可します-AMPページにはカスタムJavascriptを含めることはできません。インタラクティブなページ機能は、Javascriptを使用する代わりに、カスタムAMP要素で処理できます。

1
Deeksha Sharma

カスタムjavascriptはAMPページでは許可されておらず、AMPの基本原則の1つです。 amp-iframeがメインページからxdomainされている限り、amp-iframe内にカスタムjsを配置できます。

0
Brad Frizzell