我们已经从所有可能的AMP博客中了解到但是无法找到在AMP中包含自定义JS的任何方法。此博客(https://www.ampproject.org/docs/guides/pwa-amp/amp-as-pwa#extend-your-amp-pages-via-service-worker)表示我们可以在服务工作者的帮助下在AMP中添加Custom JS,但无法解释如何执行此操作。
请告诉我们如何操作。
编辑: - 在运行时添加JS后,它再次显示相同的旧错误,请查看图片
答案 0 :(得分:1)
请注意,在上述博客文章中,您可以扩展AMP页面
一旦他们从原点获得服务
拥有服务工作者本身并不能免除AMP限制。但是,如果您在AMP页面中安装了服务工作者,则可以开始将AMP用作(渐进式)Web应用程序,但限制较少。您可以使用多种模式 - this article涵盖主要模式,this Google Codelab显示如何实现它们。
希望有所帮助!
编辑:
是的,好吧,我明白你的意思了。您可以通过将此代码添加到服务工作者来实现此目的:
self.addEventListener('fetch', e => {
var url = new URL(e.request.url);
if(url.pathname.split('/').pop().endsWith('amp.html')) {
e.respondWith(
fetch(e.request).then(response => {
var init = {
status: 200,
statusText: "OK",
headers: {'Content-Type': 'text/html'}
};
return response.text().then(body => {
body = body.replace('</body>', '<script src="extra.js" async ></script></body>');
return new Response(body, init);
});
})
);
}
});
这会将extra.js
文件动态添加到您的应用请求的所有*amp.html
页面。我相信它仍然会验证,但我还没有测试过。
请注意,只有当它从您的源(而不是AMP缓存)提供时才会起作用,因为这是您的服务工作者可以控制的地方。
This resource是我找到代码示例的地方(它有一个软的付费专区)。
让我知道它是否有效! :)
答案 1 :(得分:1)
@ DavidScales的答案很棒,如果你想出于某种原因通过服务工作者专门包含你的自定义JS。您也可以将自定义JS包含在页面上隐藏的amp-iframe中。请注意,必须更改所有自定义j以引用父级,以便它可以访问AMP页面的DOM。
请参阅this thread。
另请参阅this thread了解如何从iframe内部访问AMP页面。
答案 2 :(得分:0)
amp-install-serviceworker组件可以通过相同的来源或通过Google AMP Cache安装服务工作者。
注意:服务工作者目前可在Chrome,Firefox和 戏。