target="parent" 行为是点击 <area> 后在直接父级 <iframe> 或 <frame> 中跳转；若无嵌套则等效 _self；典型用于多 iframe 后台系统中仅刷新目标 iframe 而非顶层页面。
area target="parent" 是什么行为
它会让点击 <area> 区域后，跳转目标在父级浏览上下文中打开——不是当前 iframe，也不是顶层窗口，而是直接包裹它的那个 <iframe> 或 <frame> 的上下文。如果当前页面没嵌套在任何 frame/iframe 中，target="parent" 等价于 target="_self"（即当前页内跳转）。
什么时候必须用 target="parent" 而不是 target="_top"
典型场景是：一张图片映射（<map> + <area>）放在子 iframe 里，但希望点击后在父 iframe（而非顶层页面）中加载新内容。比如后台系统常用「左侧菜单 iframe + 右侧主内容 iframe」结构，右侧 iframe 里有带热点图的说明页，点某个区域要刷新右侧 iframe 自身，而不是整个后台框架。
- 父页面用
<iframe src="main.html">加载主内容区 -
main.html里包含<img usemap="#nav"><map name="nav"><area href="help.html" target="parent"></map> - 点击后
help.html替换的是main.html所在的 iframe，不是整个父页面
target="parent" 在现代浏览器中的兼容性与风险
所有主流浏览器都支持 target="parent"，但它依赖 frame 层级结构真实存在。常见翻车点：
- 当前页面不在任何 iframe 中时，
target="parent"不报错但无实际跳转效果（静默降级为_self） - 若父 iframe 设置了
sandbox属性且未包含allow-top-navigation或allow-popups，则target="parent"会被浏览器拦截，控制台报Blocked a frame with origin "xxx" from accessing a cross-origin frame - 使用
iframe[srcdoc]或动态插入的 iframe 时，父上下文可能不被识别为合法parent，建议改用target="_self"或显式window.parent.location.href
替代方案：不用 target 属性也能控制跳转位置
当 target="parent" 行为不可靠（比如跨域 iframe 或 sandbox 环境），更可控的做法是用 JavaScript 拦截点击并手动导航：
立即学习“前端免费学习笔记（深入）”；
<area href="#" data-url="help.html" onclick="navigateInParent(this); return false;">
<script>
function navigateInParent(area) {
const url = area.dataset.url;
if (window.parent && window.parent !== window) {
window.parent.location.href = url;
} else {
window.location.href = url;
}
}
</script>
这种方式绕过 target 的隐式行为，能加判断、日志、错误 fallback，也更容易适配单页应用路由。
真正要注意的不是语法对不对，而是你是否清楚当前页面嵌套在哪一层、父上下文有没有导航权限。很多问题表面是 target 失效，实际是 sandbox 策略或跨域限制在背后起作用。
