绝大多数社交分享插件无法直接用 iframe 嵌入，因目标站设置 X-Frame-Options: DENY 或 frame-ancestors 'none'；需通过开发者工具检查响应头确认是否允许嵌入，仅微博 embed、B站 player、知乎专栏等官方 embed 地址可用。
绝大多数社交分享插件不能直接用 <iframe src="https://weibo.com/xxx"></iframe> 嵌入，因为目标域名响应头设置了 X-Frame-Options: DENY 或 Content-Security-Policy: frame-ancestors 'none'，浏览器会强制拦截——这不是你代码写错了，是对方服务器明确拒绝。
怎么判断一个社交 URL 是否真能 iframe 嵌入
打开浏览器开发者工具 → Network 面板 → 刷新页面并找到该 iframe 的请求 → 查看 Response Headers 中是否包含允许嵌入的声明：
-
frame-ancestors 'self' https://yourdomain.com'（白名单明确包含你的域名） -
X-Frame-Options: ALLOW-FROM https://yourdomain.com（旧标准，已逐步淘汰） - 若出现
DENY、SAMEORIGIN或'none'，则必然失败
注意：微博 embed 地址（如 https://widget.weibo.com/weibo/xxxx）、B站 player 地址（https://player.bilibili.com/player.html?bvid=xxx）、知乎专栏 embed 路径（https://zhuanlan.zhihu.com/embed/xxx）是少数明确开放的入口，必须用这些 URL，而非主站链接。
QQ 分享组件的 iframe 接入要点
腾讯提供的是封装好的 iframe 方案，但需严格按文档构造 DOM 结构和参数：
- 必须引入脚本：
<script src="https://connect.qq.com/widget/shareqq/loader/loader.js" widget="IFRAME_SHARE_QQ" charset="utf-8"></script> - iframe 的
src不是你拼的，而是由 loader.js 动态注入；你只需准备两个 DOM 节点：dom1（弹窗容器）、dom2（iframe 容器） - iframe 尺寸固定为
width="720"、height="511"，父容器高度必须设为 511px，否则内容被裁切 - 回调函数通过
initShareWin(dom1, dom2, callback)注册，不传则默认关闭弹窗
Vue/React 中 iframe 加载失败的兜底策略
社交 iframe 加载慢、跨域不触发 @load、也不抛 @error，靠监听事件远远不够：
- 不要把
src写死在模板里，用v-if或:key控制重载，避免复用旧实例导致状态错乱 - 用
ref拿到 iframe 元素后，同时监听onload和onerror，再加一个setTimeout（建议 8–10s）超时兜底 - 加载中显示 skeleton 或 loading 提示；失败后 fallback 到纯按钮 + 点击跳转新窗口（
window.open(url, '_blank')） - 移动端需额外处理：禁用
scrolling="no"可能导致滚动穿透，建议用pointer-events: none+ 手动透传点击
为什么别尝试绕过 X-Frame-Options
所有服务端设置的 X-Frame-Options 或 frame-ancestors 都由浏览器强制执行，前端无法绕过。所谓“代理转发”“fetch + innerHTML”方案本质是失效的：
- fetch 跨域被 CORS 拦截，除非对方配了
Access-Control-Allow-Origin - 即使代理成功，返回的 HTML 在当前页面执行时丢失原始上下文：JS 不执行、相对路径错乱、Cookie 不携带、history API 失效
- 微信、知乎等平台还会在页面内执行
if (window.self !== window.top) top.location = self.location主动跳出
真正可控的只有官方开放的 embed 接口，其他都是幻觉。检查响应头这一步，永远不能跳过。
