在 AMP 页面中添加 Javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43748634/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add Javascript in AMP Pages
提问by Charan R
Please help me understand how to add javascript in the AMP (Accelerated Mobile Pages). My requirement is I get an ID in URL. For example localhost:8080/home?id=1.I would like to access that id in my html file.
请帮助我了解如何在 AMP（加速移动页面）中添加 javascript。我的要求是我在 URL 中得到一个 ID。例如 localhost:8080/home?id=1。我想在我的 html 文件中访问该 ID。
or else please let me know how to add any javascript file.
否则请让我知道如何添加任何 javascript 文件。
Thank you.
谢谢你。
回答by Andrew
Unfortunately, you cannot add arbitrary scripts in AMP. From the specification, under "HTML Tags," for the tag script:
不幸的是，您不能在 AMP 中添加任意脚本。根据规范，在“HTML 标签”下，对于标签script：
Prohibited unless the type is
application/ld+json. (Other non-executable values may be added as needed.) Exception is the mandatory script tag to load the AMP runtime and the script tags to load extended components.
禁止，除非类型是
application/ld+json。（可以根据需要添加其他不可执行的值。）例外是用于加载 AMP 运行时的强制脚本标签和用于加载扩展组件的脚本标签。
So, if you want to use JavaScript from AMP, you have to use AMP's predefined components. I don't see a component that does what you want.
因此，如果您想使用 AMP 中的 JavaScript，则必须使用 AMP 的预定义组件。我没有看到可以执行您想要的操作的组件。
回答by Blue Bot
As of 11th of April 2019 Official Announcement,
截至2019年4月11日官方公告，
it is now possible using your JS inside an AMP project with amp-scriptcomponent.
现在可以在带有amp-script组件的 AMP 项目中使用您的 JS 。
First you need to import it to your project:
首先，您需要将其导入到您的项目中：
- At the top of your
.htmlfile import:
- 在
.html文件导入的顶部：
<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
- Wrap the
htmlelement/s with theamp-scriptcomponent:
html用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>
- Now you can create the JS file
- 现在您可以创建 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);
});
You can find more details and how it works in the AMP git repo amp-script.md
您可以在 AMP git repo amp-script.md 中找到更多详细信息及其工作原理
回答by Ngoc Nguyen
As far as I know, you can add Javascript to AMP by hosting the AMP script on your origin and intercept the request to get the script using a Service Worker. This technique is called "AMP as PWA". Here is the code
据我所知，您可以通过在源上托管 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'
}
});
});
}
More explanation here: https://www.smashingmagazine.com/2016/12/progressive-web-amps/#amp-as-pwa
更多解释在这里：https: //www.smashingmagazine.com/2016/12/progressive-web-amps/#amp-as-pwa
回答by Deeksha Sharma
Javascript blocks DOM construction and delays page rendering, so AMP allows only asynchronous Javascript - AMP pages can't include any custom Javascript. Interactive page features can be handled in custom AMP elements instead of using Javascript.
Javascript 会阻止 DOM 构建并延迟页面呈现，因此 AMP 仅允许异步 Javascript - AMP 页面不能包含任何自定义 Javascript。交互式页面功能可以在自定义 AMP 元素中处理，而不是使用 Javascript。
回答by Brad Frizzell
Custom javascript is disallowed on AMP pages, and is one of the founding principles of AMP. You can put custom js within an amp-iframe, as long as the amp-iframe is xdomain'd from the main page.
AMP 页面上不允许使用自定义 javascript，这是 AMP 的基本原则之一。您可以将自定义 js 放在 amp-iframe 中，只要 amp-iframe 是来自主页的 xdomain。
