Vue中<keep-alive>对iframe无效，因其缓存仅作用于VNode层，而iframe是浏览器级隔离容器，卸载即销毁整个浏览上下文；应改用v-show或display:none保状态，必要时通过:key强制刷新。
直接用 iframe 做“防刷新音乐播放器”是行不通的——它本身不防刷新，但可以借力实现“视觉不重置、音频不断”的效果。关键不在 iframe 多神奇，而在你**别让它被销毁**。
为什么页面刷新后音乐就停了？
刷新会重建整个 DOM，所有 iframe 都被重新加载，网易云播放器自然从头开始。这不是 bug，是浏览器行为。所谓“防刷新”，其实是绕过刷新带来的状态丢失，核心思路是：让播放器所在的 iframe 在页面切换或局部更新时不被卸载。
- React/Vue 中用
v-if或if条件渲染，会导致iframe被销毁重建 -
display: none隐藏比remove更安全：DOM 节点保留，内部 JS 状态、音频播放、滚动位置全都在 - 网易云外链本身不支持 postMessage 控制播放/暂停（官方未开放跨域通信接口），所以不能靠 JS “接管”播放逻辑，只能靠它自己维持状态
怎么让 iframe 在 SPA 路由切换时不重载？
在单页应用中，真正导致音乐中断的往往不是刷新，而是路由跳转时组件被 unmount。此时你要避免销毁 iframe 元素本身。
- React 中不要用
{showPlayer && <iframe></iframe>}，改用style={{ display: showPlayer ? 'block' : 'none' }} - Vue 中不用
v-if="showPlayer"，改用v-show="showPlayer" - 如果使用 React Router，可把
iframe提到Router外层，或用useEffect+ref持久化挂载点 - 注意：即使 iframe 保住了，若父页面域名变更（如从
https://a.com跳到https://b.com），仍会触发跨域重载，无法避免
网易云 iframe 的 src 参数怎么选才稳定？
网易云外链的 src 地址里几个参数直接影响播放器是否“记得自己”：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 务必用
https://开头，别用协议相对 URL（//music.163.com/...），否则本地file://或某些代理环境会失败 -
auto=1表示自动播放，但现代浏览器会拦截——它只在用户已有交互（如点击）后才生效，别指望无操作静默启动 -
type=2&id=1366216050是歌单/歌曲 ID，换 ID 就换内容；想“记住”上次播放位置，得靠网易云自身登录态和 Cookie，你的页面控制不了 - 不要频繁修改
src属性（比如用 JS 动态改），哪怕只改一个查询参数，也会触发 iframe 重载 → 音乐中断
真要“防刷新”，唯一可靠方案是什么？
如果你必须支持 F5 刷新后继续播放，目前没有纯前端方案能绕过 iframe 重载。唯一实际可行的是：把播放器抽离成独立子窗口或固定 iframe 容器，与主页面解耦。
- 用
window.open()打开一个独立窗口放网易云iframe，主页面刷新不影响它 - 或在主页面顶部/底部用固定高度
iframe，且该iframe的src不随路由变化，始终保持同一个地址 - 注意：独立窗口会被弹窗拦截器拦住，需用户首次手动触发（如点击“打开播放器”按钮）才能生效
- 这种方案下，“防刷新”本质是防主页面影响，而非 iframe 本身抗刷新——它仍然会刷新，但用户感知不到中断
说到底，iframe 不是播放器，它只是个窗口。你想它“不断”，就得保证这个窗口不关；你想它“不重载”，就得保证它的 src 不变、DOM 不删、上下文不丢。所有技巧都围绕这三点，而不是期待网易云开放 API 或浏览器突然松动同源策略。
