在AMP頁面中添加Javascript

Question

請幫助我了解如何在AMP（加速移動頁面）中添加javascript。 我的要求是我在URL中獲取ID。 例如localhost：8080 / home？id = 1.我想在我的html文件中訪問該id。

或者請讓我知道如何添加任何JavaScript文件。

謝謝。

Answer 1

不幸的是，您無法在AMP中添加任意腳本。 根據規范 ，在標簽script “HTML標簽”下：

除非類型是application/ld+json否則禁止。 （可以根據需要添加其他非可執行值。）例外是加載AMP運行時的必需腳本標記和加載擴展組件的腳本標記。

因此，如果您想使用AMP中的JavaScript，則必須使用AMP的預定義組件 。 我沒有看到一個組件可以滿足您的需求。

Answer 2

據我所知，您可以通過在您的源上托管AMP腳本來添加Javascript到AMP，並攔截使用Service Worker獲取腳本的請求。 該技術稱為“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

Answer 3

Javascript阻止DOM構建並延遲頁面呈現，因此AMP只允許異步Javascript - AMP頁面不能包含任何自定義Javascript。 可以在自定義AMP元素中處理交互式頁面功能，而不是使用Javascript。

Answer 4

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

2. 用amp-script組件包裝html元素：

<!-- hello-world.html -->
<amp-script layout="container" src="https://yourdomain.com/hello-world.js">
  <button id="hello">Insert Hello World!</button>
</amp-script>

3. 現在您可以創建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中找到更多詳細信息及其工作原理

Answer 5

AMP頁面不允許使用自定義JavaScript，這是AMP的基本原則之一。 您可以將自定義j放在amp-iframe中，只要amp-iframe是主頁面的xdomain'd即可。