如何使iframe内嵌页面的链接点击后在该iframe内打开？

因为你同时拥有嵌入方和被嵌入方的权限，下面两种方法任选其一即可：

1. 修改被嵌入网站的链接属性（最直接） #

给被嵌入页面里的所有链接添加target="_self"属性，点击时就会直接在当前iframe框架内打开目标页面，不会跳出到父页面或新窗口。

• 单个链接手动设置：

<a href="inner-page.html" target="_self">我的链接</a>

• 批量处理已有链接（适合页面链接较多的情况）：
  在被嵌入页面的JS脚本中加入以下代码，自动给所有链接加上target="_self"：

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('a').forEach(link => {
    link.setAttribute('target', '_self');
  });
});

2. 在嵌入网站的iframe中通过JS控制（无需修改子页面） #

如果不想改动被嵌入网站的代码，可以在嵌入方页面里，通过JS监听iframe加载事件，修改内部链接的跳转行为：

首先给iframe设置ID：

<iframe id="my-embedded-frame" src="https://被嵌入网站地址"></iframe>

然后添加父页面的JS代码：

const iframe = document.getElementById('my-embedded-frame');
iframe.addEventListener('load', () => {
  // 注意：此方法要求两个网站同源（如同一域名/子域名），否则浏览器跨域策略会阻止访问iframe内部DOM
  const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
  iframeDoc.querySelectorAll('a').forEach(link => {
    link.addEventListener('click', (e) => {
      e.preventDefault();
      iframe.src = link.href;
    });
  });
});

额外注意 #

如果被嵌入页面有动态生成的链接（比如AJAX加载的内容），推荐用事件委托处理：

// 被嵌入页面的事件委托写法，覆盖动态生成的链接
document.addEventListener('click', (e) => {
  if (e.target.tagName === 'A') {
    e.preventDefault();
    window.location.href = e.target.href;
  }
});

内容的提问来源于stack exchange，提问作者Potato Lord