如何通过iframe内JS/jQuery/AJAX重定向HTML5 sandbox父窗口

首先纠正一个常见误区：HTML5标准并未废弃window.top.location.href的跳转能力，绝大多数场景下跳转失效都是现代浏览器新增的安全策略限制导致，常见触发原因有三类：

• iframe配置了sandbox沙箱属性，但未开放顶层窗口导航的对应权限
• iframe页面与顶层页面跨域，触发同源策略拦截
• 跳转逻辑无用户主动交互触发（比如页面加载完成后自动跳转），被浏览器的防骚扰拦截规则拦下

具体适配方案 #

同域场景标准写法 #

如果iframe页面和顶层页面同域名，直接使用标准API即可，优先推荐replace方法避免在浏览历史中残留当前页记录：

// 常规跳转，可通过浏览器后退按钮返回当前页
window.top.location.href = "目标跳转地址";

// 无历史记录跳转，跳转后无法后退到当前页
// window.top.location.replace("目标跳转地址");

注意：上述逻辑需要绑定在用户主动触发的事件回调中（比如按钮点击、表单提交、按键响应），页面加载即自动执行的跳转几乎都会被现代浏览器拦截

sandbox沙箱场景权限配置 #

如果父页面给iframe加了sandbox属性，必须在属性值中补充顶层导航相关权限，否则脚本无权操作顶层窗口跳转：

<iframe 
  src="iframe页面地址"
  sandbox="allow-scripts allow-same-origin allow-top-navigation-by-user-activation"
></iframe>

如果需要支持非用户触发的自动跳转，把allow-top-navigation-by-user-activation替换为allow-top-navigation即可，注意该配置会降低沙箱安全性，谨慎使用。

跨域无父页修改权限的兜底方案 #

如果iframe和顶层页跨域、且你没有权限修改父页面的iframe配置，可以使用window.open指定target为_top实现跳转：

// 必须绑定在用户点击等主动交互事件上执行，否则会触发弹窗拦截
window.open("目标跳转地址", "_top");

兜底方案的兼容性覆盖所有主流现代浏览器，只要是用户主动触发的场景不会被拦截。

内容的提问来源于stack exchange，提问作者Ye-Jun Hyun