iframe是最可靠零配置嵌入方式，但需确保HTTPS地址、避免混合内容、延迟加载并容错处理，且无法跨域操作其内容。
iframe 是目前最可靠、零配置的嵌入方式，但必须选对地址、注意协议和加载时机，否则页面白屏或报错是常态。
为什么直接写 <iframe src="http://..."> 经常不显示？
常见错误现象：Blocked loading mixed active content（HTTP 资源被 HTTPS 页面拦截）、net::ERR_CONNECTION_REFUSED（旧链接已失效）、控制台空白但 iframe 区域留白。
- 必须确认 src 地址以
https://开头，本地用file://协议双击打开 HTML 时，多数 http 地址会被浏览器直接拒绝加载 - 很多老链接（如
http://i.tianqi.com/...、http://weather.265.com/...）已下线或强制跳转 HTTPS，但未配好证书，导致连接失败 - 部分服务商（如 Weather.com、AccuWeather）对域名做了白名单限制，
localhost可能允许，但直接双击打开的file://路径一律拒绝
哪些 iframe 地址现在还能稳定用？
截至 2026 年 5 月，实测可用且无需注册的公开地址（HTTPS + 无显式域名校验）：
- OpenWeatherMap 官方 widget：
https://www.openweathermap.org/weather-widget/5768937?vertical=true&lang=zh_cn&units=metric（5768937换成你城市的 ID） - WeatherAPI 官方 embed：
https://www.weatherapi.com/weather-widget/1234567890?city=Beijing&lang=zh（需先在 weatherapi.com 免费注册获取 embed ID） - tianqiapi.com 的轻量版：
https://tianqiapi.com/api.php?style=tw&skin=pitaya（无 key、无域名限制，但含小标 logo）
注意：& 是 HTML 中 & 的合法转义写法，别漏掉；units=metric 才显示摄氏度，漏写会返回开尔文值。
怎么避免 iframe 拖慢首屏、又防止它挂了影响布局？
直接把 src 写死在标签里，浏览器会同步加载 iframe，阻塞主文档解析。更稳妥的做法是延迟赋值 + 容错兜底：
<div id="weather-container">
<iframe id="weather-iframe" width="200" height="100" frameborder="0" scrolling="no" allowtransparency="true"></iframe>
</div>
<script>
window.addEventListener('DOMContentLoaded', () => {
const iframe = document.getElementById('weather-iframe');
// 延迟 300ms 加载，避开关键渲染路径
setTimeout(() => {
iframe.src = 'https://tianqiapi.com/api.php?style=tw&skin=pitaya';
}, 300);
// 加载失败时隐藏 iframe，避免留白
iframe.onerror = () => {
iframe.style.display = 'none';
};
});
</script>
- 不用
window.onload，它等所有资源（含图片、iframe）完成才触发，太晚 - 不要用 jQuery 的
$("#tianqi").attr("src", url)，现代项目通常没引入 jQuery - 别依赖
iframe.onload判断是否加载成功——网络中断、服务返回 404 时它仍会触发
想改样式或读数据？iframe 里你什么都拿不到
这是 iframe 的本质限制：它运行在独立上下文，document.getElementById 查不到其中元素，fetch() 也跨不过同源策略。如果你需要：
- 自定义字体、颜色、布局 → 必须换方案（自己调 API + 渲染 DOM）
- 拿到温度数值做逻辑判断（比如低于 5°C 显示穿衣提醒）→ iframe 不可行，得走后端代理或选支持前端直连的 API（如 weatherapi.com）
- 城市名动态切换 → iframe src 是静态字符串，只能靠 JS 拼接并重设
src，但每次重设都会重新加载整个 iframe
真正自由的定制，从来不是靠 iframe 塞进去，而是绕过它——但那意味着你得处理跨域、密钥管理、错误重试和 DOM 就绪时机，这些坑比 iframe 深得多。
