在AMP页面中如何引入JS文件使其在window.onload后自动执行代码

该需求完全可以实现，先说明你遇到的两个异常表现的原因：

1. 顶层未包裹的getUserLocation()可以自动执行：amp-script满足自动运行条件时，脚本加载完成就会立刻执行顶层代码，不需要用户交互触发。
2. 用window.onload包裹后函数不执行：你应该是直接对window.onload属性赋值函数，这种写法会覆盖amp-script模拟环境下预先绑定的load事件处理逻辑，导致你的回调不会被触发，换成事件监听的写法即可。

实现步骤 #

第一步：调整amp-script标签，移除冗余按钮 #

直接删掉隐藏的button元素，修改后的标签如下：

<amp-script layout="container" src="amptest.js">
</amp-script>

注：生产环境下需要保证amptest.js文件体积不超过150KB，即可默认支持无用户交互自动执行，无需额外触发元素。

第二步：调整JS文件的执行逻辑 #

将原来的按钮相关代码全部删除，改用addEventListener监听load事件实现页面加载完成后执行的需求，代码示例如下：

// 页面加载完成后执行的逻辑
function getUserLocation() {
  // 此处保留你原有的业务逻辑
}

// 兼容处理：如果页面已经加载完成直接执行，否则监听load事件
if (document.readyState === 'complete') {
  getUserLocation();
} else {
  // 不要直接给window.onload赋值，用addEventListener绑定事件
  window.addEventListener('load', getUserLocation);
}

注意事项 #

• 不要直接对window.onload、document.onclick这类事件属性直接赋值，会覆盖AMP模拟环境的内置事件处理，统一使用addEventListener绑定事件即可。
• 如果你的JS文件体积超过150KB，AMP默认会限制脚本无交互自动执行，这种情况下你可以保留之前的隐藏按钮方案，同时在脚本里用上述load事件监听逻辑，保证业务代码在页面加载完成后再执行。

内容的提问来源于stack exchange，提问作者Veni