如何在AMP页面中集成intlTelInput插件并解决自定义JS报错问题

错误原因 #

你当前的写法违反了AMP的核心规则：

• 直接在<head>中引入非AMP官方的第三方JS（jQuery、intlTelInput的常规JS包）
• 在<body>中直接编写自定义<script>标签写初始化逻辑
• 用@import在amp-custom中引入外部CSS
• amp-script的使用方式不符合规范，不能直接将第三方插件地址作为src属性值，也不能在amp-script外部操作其内部的DOM元素

修复步骤 #

1. 移除<head>中你自行添加的jQuery、intlTelInput的JS引入标签，仅保留AMP官方组件的JS引入。
2. 将intlTelInput的CSS内容全部内联到<style amp-custom>标签内，删除原有的@import语句，注意amp-custom内的所有CSS总大小不能超过75KB。
3. 把jQuery、intlTelInput的JS代码，还有你写的插件初始化逻辑，合并打包为一个单独的JS文件，该文件大小不能超过150KB，托管到你的站点同域名下。
4. 将amp-script的src属性替换为你打包好的自定义JS地址，重新计算该JS文件的sha384哈希值，替换掉<meta name="amp-script-src">里的原有哈希值。
5. 调整插件初始化逻辑，适配amp-script的DOM操作规则，所有对表单元素的操作都要在自定义JS文件内部完成，不能写在amp-script标签外。
6. 如果你需要调用ipinfo.io的接口，需要在AMP的内容安全策略配置中添加该域名的访问许可，避免请求被拦截。

内容的提问来源于stack exchange，提问作者Soubhagya Kumar Barik