多数主流天气服务禁止 iframe 嵌入，因服务器返回 x-frame-options: deny 或 content-security-policy: frame-ancestors 'none'；应优先选用 openweathermap 等支持嵌入的官方小部件，或调用其 api 自行渲染。
iframe 加载天气插件时被拒绝（CORS 或 X-Frame-Options）
多数主流天气服务（如 Weather.com、AccuWeather、中国天气网）默认禁止 iframe 嵌入，浏览器控制台会报 X-Frame-Options: DENY 或 Content-Security-Policy: frame-ancestors 'none' 错误。这不是你代码写错了，是对方服务器主动拒绝被嵌入。
实操建议：
- 先在浏览器直接访问目标天气页面（例如
https://www.weather.com/...），右键「查看框架信息」或打开开发者工具 → Network → 刷新 → 找到主 HTML 请求 → 查看响应头中是否有X-Frame-Options或Content-Security-Policy字段 - 若存在且值为
DENY或frame-ancestors 'none'，说明该地址无法用iframe安全加载，强行写<iframe src="..."></iframe>会白屏或显示空白 - 部分站点提供专门的「嵌入版」URL（常带
?embed=1或路径含/embed/），需查阅其开发者文档，而非直接套用官网首页链接
用 iframe 加载允许嵌入的天气服务（如 OpenWeatherMap Widget）
OpenWeatherMap 提供官方可嵌入的天气小部件，无需 API 密钥，但需按其规则生成 URL。它通过 JSONP + iframe 混合方式绕过同源限制，本质是对方服务端已配置 frame-ancestors 允许你的域名。
实操建议：
- 访问
https://openweathermap.org/weather-widget，填入城市名、主题、单位等，生成一段<iframe></iframe>代码 - 生成的
src类似：https://openweathermap.org/weather-widget-2978462?cityId=1816670&units=metric&theme=dark—— 注意其中cityId是必须参数，不能只写城市名 - 把生成的
<iframe></iframe>粘贴进 HTML 即可，但建议加loading="lazy"和固定宽高（如width="300" height="120"），避免布局偏移 - 不要手动修改该 URL 中的 query 参数顺序或拼写，
cityId错一位、units写成unit都会导致加载失败并静默白屏
iframe 加载失败时如何快速判断是网络问题还是策略拦截
白屏不等于代码没生效，得区分是请求发不出去，还是发出去了但被拦下来。
实操建议：
- 打开浏览器开发者工具 → Network 标签页 → 刷新页面 → 找到对应
iframe的src请求 → 看状态码：如果是200但预览为空，大概率是响应头拦截；如果是0或(blocked:other)，说明请求根本没发出（常见于混合内容：HTTP 页面加载 HTTPS iframe 被现代浏览器阻止） - 检查控制台错误：出现
Load denied by X-Frame-Options或Refused to display ... in a frame because an ancestor violates the following Content Security Policy就是明确的策略拦截 - 临时把 iframe
src换成一个确定可嵌入的测试地址（如https://httpbin.org/html），如果能显示，说明你的 iframe 写法没问题，问题出在目标源本身
替代方案：不用 iframe，改用 OpenWeatherMap API + 自绘 UI
当 iframe 被封死，又需要定制样式或交互时，直接调 API 是更可控的选择。OpenWeatherMap 免费层支持每分钟 1000 次调用，对中小网站完全够用。
实操建议：
- 注册获取免费 API key（
https://home.openweathermap.org/api_keys），注意 key 绑定的是域名，本地开发用localhost可直通，上线后需在后台添加你的生产域名 - 用
fetch请求：https://api.openweathermap.org/data/2.5/weather?id=1816670&appid=YOUR_KEY&units=metric，返回 JSON 包含温度、天气图标 code、风速等字段 - 天气图标需自行映射：API 返回的
weather[0].icon（如"04d"）要对应到https://openweathermap.org/img/wn/04d@2x.png，注意 @2x 后缀仅用于高清屏，普通屏用@2x前的即可 - 别漏掉错误处理：网络失败、API key 过期、城市 ID 无效都会导致
fetch返回非 200 响应，建议加.catch()并 fallback 显示“暂无天气数据”
src 地址本身是否允许被嵌入。
