如何通过amp-script在AMPHTML页面中使用自定义JavaScript？

核心属性说明（width/height/layout相关问题解答） #

• layout属性常用值逻辑：
  • fixed：固定宽高模式，必须同时指定width和height属性，组件大小不会随内容变化，适合固定尺寸的交互区域
  • container：自适应内容模式，不需要指定宽高，组件会自动匹配内部子元素的尺寸，适合动态渲染内容的场景，使用时amp-script标签内部必须包含子元素
• width/height属性：仅在使用非container类布局（如fixed、responsive）时需要填写，用于AMP预计算页面布局，避免页面加载时出现布局偏移（CLS）

自定义JS不生效（无console输出）问题解决 #

amp-script运行在独立的worker沙箱中，不会直接执行全局裸写的JS代码，必须遵循沙箱规则编写代码，常见错误和正确写法如下：

错误写法（直接写全局逻辑不会执行） #

// 该写法在amp-script环境中不会运行
console.log('测试日志')

正确写法（监听DOM加载完成后执行逻辑） #

document.addEventListener('DOMContentLoaded', () => {
  console.log('自定义JS加载成功，正常执行')
  // 所有业务逻辑都要写在这个回调内
})

另外需要确保两个配置匹配：

1. 头部声明的自定义脚本id属性，必须和body中amp-script标签的script属性值完全一致
2. 所有需要JS操作的DOM节点，必须放在amp-script标签内部，否则无法被选中和修改

环境隔离问题解答 #

amp-script区域完全和AMP主运行环境、其余DOM节点隔离，你只能操作标签内部的DOM，编写的JS逻辑不会污染全局环境，也不会影响其他AMP组件的正常运行 #

完整可校验实操示例 #

完整AMP页面代码 #

<!DOCTYPE html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>AMP自定义JS测试页</title>
  <link rel="canonical" href="你当前页面的正式URL">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <!-- AMP官方基础样式 -->
  <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>
  <!-- 引入amp-script官方组件 -->
  <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
  <!-- 声明自定义脚本，id要和下方amp-script的script属性对应 -->
  <script id="blog-hub-script" type="text/plain" target="amp-script" src="blogHub.js"></script>
  <style amp-custom>
    /* 你的自定义样式写在这里 */
  </style>
</head>
<body>
  <!-- 自定义JS可操作的区域，使用container自适应内部内容 -->
  <amp-script layout="container" script="blog-hub-script">
    <!-- 所有需要JS控制的DOM都放在这里 -->
    <button id="test-btn">测试交互</button>
    <div id="render-area"></div>
  </amp-script>
</body>
</html>

对应的blogHub.js示例代码 #

document.addEventListener('DOMContentLoaded', () => {
  const testBtn = document.getElementById('test-btn')
  const renderArea = document.getElementById('render-area')

  console.log('自定义JS加载成功')

  testBtn.addEventListener('click', () => {
    console.log('按钮点击事件触发')
    renderArea.textContent = '交互功能正常运行'
  })

  // 你的CSV加载、列表渲染、iframe控制等原生JS逻辑都可以写在这里
})

基础注意事项 #

• 自定义JS单文件体积不能超过150KB，为AMP硬性限制
• 原生JavaScript的绝大多数API都可以正常使用，不需要额外依赖其他库

内容的提问来源于stack exchange，提问作者Michael J Scharen