AMP(Accelerated Mobile Pages)にJavaScriptを追加する方法を理解するのを手伝ってください。私の要件は、URLにIDを取得することです。例えばlocalhost:8080/home?id = 1.htmlファイルでそのidにアクセスしたいです。
または、javascriptファイルを追加する方法を教えてください。
ありがとうございました。
残念ながら、AMPに任意のスクリプトを追加することはできません。 仕様 から、「HTMLタグ」の下で、タグscript
に対して:
タイプが
application/ld+json
でない限り禁止されています。 (必要に応じて、その他の非実行可能値を追加できます。)例外は、AMPランタイムをロードする必須のスクリプトタグと、拡張コンポーネントをロードするスクリプトタグです。
したがって、AMPからJavaScriptを使用する場合は、AMPの事前定義済みの components を使用する必要があります。あなたがしたいことをするコンポーネントが見当たりません。
私の知る限り、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
2019年4月11日 公式発表 、
amp-script
コンポーネントを使用してAMPプロジェクト内でJSを使用できるようになりました。
まず、プロジェクトにインポートする必要があります。
.html
ファイルインポートの上部:<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
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>
// 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 で詳細と動作を確認できます。
JavascriptはDOMの構築をブロックし、ページのレンダリングを遅らせるため、AMPは非同期Javascriptのみを許可します-AMPページにはカスタムJavascriptを含めることはできません。インタラクティブなページ機能は、Javascriptを使用する代わりに、カスタムAMP要素で処理できます。
カスタムjavascriptはAMPページでは許可されておらず、AMPの基本原則の1つです。 amp-iframeがメインページからxdomainされている限り、amp-iframe内にカスタムjsを配置できます。