如何让iframe内的链接跳转时在整个浏览器标签页加载？

以下是两种可直接落地的方案：

方案1：全局设置默认打开目标 #

在iframe嵌套的头部页面的<head>标签中添加base标签，统一指定页面内所有链接的默认打开方式为顶层窗口：

<head>
  <!-- 其他头部配置 -->
  <base target="_top">
  <!-- 引入你的公共CSS -->
</head>

这个方案无需修改任何现有链接代码，全局生效。如果有少数链接需要保留在iframe内打开，单独给对应<a>标签添加target="_self"属性即可覆盖全局配置。

方案2：单独给链接指定打开目标 #

如果只需要部分链接跳出iframe，直接给对应的<a>标签添加target="_top"属性：

<a href="/page1" target="_top">页面1</a>
<a href="/page2" target="_top">页面2</a>

如果链接数量多，也可以用JS批量添加：

// 写在头部页面的JS代码中
document.querySelectorAll('a').forEach(link => {
  link.target = '_top'
})

补充说明 #

_top是HTML原生的目标关键字，作用是让链接在当前浏览器窗口的最顶层上下文加载，完全替换当前整个页面，正好适配你的需求。
如果后续站点迭代需要更多头部交互能力，也可以考虑用服务端模板复用、前端公共组件的方案替代iframe，能规避iframe自适应高度、跨域限制、SEO等潜在问题。

内容的提问来源于stack exchange，提问作者syntax error