HTML怎么插入天气信息模块_HTML weather widget嵌入教程【实时】

最简单方案是使用支持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 上死磕。