堆棧內存溢出
  簡體   English   中英

在 AMP 中包含自定義 JavaScript 的最佳方式

[英]Best way to include custom JavaScript in AMP

 原文  2016-03-16 12:29:23  2   6    javascript/ amp-html

問題描述

我閱讀了有關腳本標簽的所有文檔，但找不到如何在 AMP HTML 中包含自定義 JavaScript。

我知道<script>標簽是被禁止的，除非它的類型是application/ld+json 。

有默認的 AMP HTML 運行時組件和包含不同組件的特定形式的擴展組件，但我找不到自定義 JavaScript 的特定形式。

這是我想包含在 AMP HTML 中的腳本標簽；

<script src="https://arifkarim.com/widget/layouts/global/js/legaltext.js"></script>

6 個解決方案

解決方案1
 35  2016-03-28 18:55:49

AMP 的全部意義在於只允許 Web 技術的一個子集來阻止您的頁面變慢。

Javascript 通常是網站緩慢的原因，因此 AMP 頁面不允許它們（AMP 腳本本身除外），盡管他們試圖填補這留下的空白，這些 amp 組件是專門編寫的，不會變慢。

因此，如果您想使用 Javascript，您有多種選擇：

  1. 不要使用 AMP。 沒有人強迫你這樣做。
  2. 從您的 amp 文檔中刪除腳本標簽，並在沒有該功能的情況下繼續使用。
  3. 找到一個與您的 JavaScript 具有相同功能的 amp 組件並使用它。 不知道是什么 legaltext.js 我猜它會顯示一些合法的文本，比如 cookie 通知，所以也許amp-user-notification小部件會起作用？
  4. 在amp iframe 中使用您的 Javascript。 這些在 amp 頁面中是允許的，但可能會以較低的優先級加載，以確保它們不會減慢主頁面的速度。

解決方案2
 4  2016-03-18 20:38:30

AMP 中通常不允許使用<script>標簽。 有一些外部 javascript 文件是作為 AMP 項目的一部分構建的，在某些情況下是允許的，甚至是必需的。 除此之外，不允許使用javascript。 AMP 無法使用自定義腳本標簽。

解決方案3
 3  2016-09-07 06:55:25

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

解決方案4
 2  2019-07-25 17:57:15

現在不需要使用amp-iframe因為 AMP 原生支持 javascript，如官方文檔中所述

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>

這是官方的amp-script規范

解決方案5
 1  2018-03-26 07:46:37

好的，我遇到了同樣的問題，對我來說最好的方法是使用 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 將異步渲染您的應用程序，每個人都很高興 :-))

希望有幫助！

解決方案6
 1  2019-11-03 09:25:01

AMP 允許在開發和生產模式下使用自定義 JavaScript，而無需 (iframe) hack。

要在您的 AMP 頁面中包含自定義 JavaScript，請使用<amp-script>組件。

下面是一段說明如何使用<amp-script>組件的片段；

<!doctype html>
<html amp lang="en">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <!-- Important to add "amp-script" custom element reference -->
  <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
  <title>AMP with custom JavaScript</title>
  <link rel="canonical" href=".">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  </head>
<head>
<body>
  <amp-script layout="container" src="https://example.com/my-custom-javascript.js">
    <p>Here, content that you may want to modify using a custom JavaScript</p>
  </amp-script>
</body>
</html>

請注意，對自定義 JavaScript 的引用可以是相對路徑，也可以是完整路徑。

值得注意的是，AMP 對任何給定頁面上的所有<amp-script>組件強制執行 150 KB 的自定義 JavaScript 限制。

為所有<amp-script>組件使用 150 KB 自定義 JavaScript 的原因是為了控制性能。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 包含Javascript的最佳方法是什么？ Google AMP 和自定義 Javascript 帶有自定義 JavaScript 的 AMP 頁面 在java servlet中包含javascript的最佳方式 將外部JavaScript調用納入網站的最佳方法 在自定義控件中處理JavaScript的最佳方法是什么？ JavaScript-處理“ this”指針和自定義參數的最佳方法 在頁面中包含交互式外部內容的最佳方法（JavaScript，AJAX，jQuery） 使用用戶控件時包含JavaScript的最佳/高效方法 在 AMP (ACCELERATED MOBILE PAGES) wesbite 中使用自定義 vanilla javascript 的正確方法是什么
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM