最简单方案是使用支持https且无域名限制的iframe天气小部件（如weatherapi.com官方embed）；若需自定义，则用其前端友好api配合key调用，注意q参数用英文名、禁用aqi减少体积。
用 <iframe></iframe> 嵌入第三方天气小部件最简单，但得选对服务商
绝大多数所谓“HTML 插入天气模块”本质就是嵌一个外部 iframe，不是自己写 JS 请求 API。主流免费服务如 Weather.com、AccuWeather、WeatherAPI 的 widget 都提供现成的 HTML 代码，复制粘贴就行。但注意：它们默认带广告、有域名白名单限制（比如只允许在 localhost 或指定域名下显示），本地双击打开 index.html 会直接空白或报错 CORS。
- 优先选支持 HTTPS 且明确标注 “no domain restriction” 的 widget（例如
weatherapi.com的官方 embed） - 别信“纯 HTML+CSS 实现天气”的教程——没有 JS 请求接口，根本拿不到实时数据
- 如果页面已用 HTTPS，嵌入 HTTP 地址的 iframe 会被浏览器拦截，必须确认 widget 地址以
https://开头
fetch() 调用天气 API 需要后端代理或 CORS 支持
想完全自定义样式或避开 iframe 广告？得自己发请求。但直接在前端用 fetch() 调 openweathermap.org/api 这类公开 API，99% 会失败——因为这些接口默认不返回 Access-Control-Allow-Origin: *，浏览器直接拦掉。
- 常见错误现象：
Failed to load resource: net::ERR_FAILED或控制台报CORS policy: No 'Access-Control-Allow-Origin' header - 可行方案只有两个：走自己搭的轻量代理（比如用 Cloudflare Workers 转发请求），或选原生支持前端直连的 API（如
weatherapi.com免费版允许前端调用，但需注册获取key） - 别硬套教程里的
fetch('http://api.xxx')示例——没配 key 或没走代理，一定挂
用 weatherapi.com 的 current.json 接口实操示例
这是目前对前端最友好的免费选择：无需后端、响应快、文档清晰。关键点是把 key 放 URL 里，且必须用 HTTPS。
fetch('https://api.weatherapi.com/v1/current.json?key=YOUR_KEY&q=Shanghai&aqi=no')
.then(res => res.json())
.then(data => {
document.getElementById('weather').textContent =
`${data.location.name}: ${data.current.temp_c}°C, ${data.current.condition.text}`;
});
-
q参数支持城市名、IP、经纬度，但别传中文（会 400 错误），用拼音或英文名，如q=Beijing -
aqi=no关掉空气质量数据，减少响应体积；需要就改成yes - 免费版限 100 万次/月，但每小时最多 30 次——别在
setInterval里每秒刷一次
本地开发时 iframe 白屏 / API 报错，先查这三件事
不是代码写错了，大概率是环境或配置卡住了。
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器开发者工具，看 Network 标签页里 iframe 的请求状态码是不是
403（被服务商拒绝）或0（混合内容拦截） - 检查当前页面地址栏是不是
file:///开头——所有基于 CORS 的 API 和多数 iframe widget 都不支持本地文件协议 - 用
curl -I https://api.weatherapi.com/...测试接口是否能通，排除网络或 key 失效问题
天气数据本身没多复杂，难的是绕过浏览器安全策略和第三方服务限制。真要稳定用，要么老老实实嵌 iframe（接受广告和样式限制），要么加一层极简代理（几行 Cloudflare Workers 就够）。别在 CORS 上死磕。
