同源时子页面可直接通过 window.parent.document.title 修改父页面标题;跨域时因同源策略限制,window.parent 返回隔离代理对象,赋值会抛出 DOMException 错误且无法绕过。

同源前提下,子页面可以直接通过 window.parent.document.title 修改父页面标题;跨域时完全不可行,任何尝试都会触发安全错误。
为什么只能在同源时生效
浏览器强制执行同源策略(Same-Origin Policy),window.parent 在跨域时返回的不是真实父窗口对象,而是被隔离的代理对象。对 window.parent.document.title 赋值会直接抛出 DOMException: Blocked a frame with origin "xxx" from accessing a cross-origin frame. 错误,且无法捕获或绕过。
- 同源指协议、域名、端口三者完全一致(例如都是
https://example.com:8080) - 即使只是端口不同(如
http://localhost:3000和http://localhost:5000),也视为跨域 -
document.title是只读属性(跨域时)或受权限限制(同源时才可写)
子页面修改父页面 title 的正确写法
确保 iframe 与父页同源后,在子页面 JS 中直接赋值即可:
window.parent.document.title = "来自子页面的新标题";
- 不需要等待
load或DOMContentLoaded,只要脚本执行时父页已加载完成即可生效 - 若父页使用了单页应用(SPA)路由,建议在子页
DOMContentLoaded后再执行,避免父页 DOM 尚未就绪 - 不要用
window.parent.title—— 这是只读的 window 属性,修改无效
常见错误和替代方案
遇到“无法设置父标题”时,先确认是否真为同源;如果不是,以下方式都无效:
立即学习“前端免费学习笔记(深入)”;
-
postMessage不能修改document.title:父页收到消息后仍需自己执行document.title = ...,但前提是父页愿意配合并已监听 - 试图通过
window.parent.frames["name"].document.title访问:如果 iframe 没设name属性,或父页未暴露该引用,会报undefined - 在子页用
setTimeout反复重试:跨域下每次都会失败,纯属浪费资源
真正能落地的跨域方案只有父页主动监听 message 事件,并在白名单校验后更新自身 document.title —— 但这本质上是父页行为,子页仅能“请求”,不能“修改”。



















