iframe src 必须使用官方生成的 embed 链接，含 /embed 或 /embed/v1/ 路径，禁用手拼 URL；必须设置 loading="lazy"、referrerpolicy="no-referrer-when-downgrade"、allowfullscreen 属性；宽高需显式设定且最小边 ≥200px；国内部署须配高德 iframe 或文本地址 fallback。
iframe src 必须是官方生成的 embed 链接，不能手拼或复制地址栏 URL
直接把 https://www.google.com/maps/place/... 或 https://map.baidu.com/?q=... 塞进 src 属性，99% 会白屏或跳转到完整地图页。Google、高德、百度只允许其后台签发的短链或 /embed 路径被 iframe 加载。
正确做法：打开对应地图服务 → 搜索地点 → 点「分享」→ 切到「嵌入地图」或「嵌入网页」页签 → 复制整段 <iframe> 代码。例如：
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!..." width="100%" height="450" ...></iframe>
-
src中必须含/embed或/embed/v1/，不含/place/、/search/或纯跳转参数 - 高德/百度的链接是带权限的短链（如
https://surl.amap.com/xxx），手拼https://www.amap.com/place/...无效 - 参数（如坐标、缩放）由服务端动态生成，改一个字符就失效
必加的 iframe 属性：loading、referrerpolicy、allowfullscreen
缺任意一项都可能引发白屏、403、首屏卡顿或功能缺失。这些不是“可选优化”，而是服务端校验或浏览器行为的硬性要求。
-
loading="lazy"：防止地图资源阻塞首屏渲染，尤其适合联系页中下部的地图；但若地图在首屏可视区，慎用，否则可能延迟 1–2 秒才出现 -
referrerpolicy="no-referrer-when-downgrade"：确保 Referer 头能被发送，供 Google/高德校验域名白名单；漏掉它，密钥验证失败，返回空白或 403 -
allowfullscreen：不加就无法点击街景图标进入全屏模式（基础地图仍可用） -
frameborder="0"和style="border:0"已冗余，现代浏览器默认无边框，删掉更干净
宽高必须显式设置，且最小边 ≥ 200px
Google 明确要求嵌入尺寸任一方向不得小于 200px，否则渲染异常；百分比写法需配合父容器高度，height="100%" 单独使用基本等于 0。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
width="100%" height="450"，再用 CSS 控制父容器最大宽度（如max-width: 800px） - 若要响应式适配移动端，别依赖
aspect-ratio或max-height，它们对 iframe 不生效；改用媒体查询 + 固定像素高度 - 父容器若用了
position: absolute或transform，某些旧版 Chrome 可能导致loading="lazy"失效，优先保持流式布局
国内部署必须准备 fallback，GFW 下 iframe 会彻底不可用
Google Maps、部分 YouTube 视频的 iframe 在国内无法加载，不是代码问题，而是网络策略限制。等用户反馈“地图没出来”再补救，体验已崩。
- 不要只写一个
<iframe>，用<div>包裹后加备用内容：<p>地图加载失败，请查看地址：上海市黄浦区外滩</p> - 高德 iframe 是最顺滑的 fallback：它在国内 CDN 加速、支持中文 POI、无需密钥，且和 Google iframe 结构一致，可直接 swap
- 避免用 JS 动态检测加载失败再替换——iframe 的
onerror不触发，得靠定时器轮询contentDocument，复杂且不可靠
真正容易被忽略的，是 referrerpolicy 和 fallback 的组合：前者决定地图能不能加载，后者决定加载失败时用户看到什么——这两项不设好，嵌入就只是个半成品。
