如何设置iframe内嵌页面的链接在父窗口打开？

问题核心 #

你之前尝试在iframe标签内添加<base target="_parent">的写法本身无效——iframe的内部内容是通过src加载的外部页面，写在iframe标签里的HTML不会被应用到加载的页面中，还会被系统过滤清除。

可行解决方案 #

1. 优先尝试LMS自带的嵌入参数（无需额外权限） #

很多LMS（比如你使用的Canvas）会提供嵌入相关的URL参数来控制页面行为。你可以尝试在iframe的src中添加链接目标参数，示例代码：

<p>
  <iframe src="CANVAS_LMS_DOMAIN/courses/COURSEID/modules?embedded=true&link_target=_parent" width="100%" height="900px"></iframe>
</p>

不同LMS的参数名可能不同，若link_target无效，可以查阅对应LMS的官方文档，寻找控制链接打开方式的专属参数。

2. 申请JavaScript权限（同域场景下有效） #

如果两个LMS页面属于同一域名（同域），可以通过JavaScript监听iframe内的链接点击事件，强制在父窗口打开。需要向管理员申请允许嵌入<script>标签，或者将代码添加到系统全局脚本中：

<p>
  <iframe id="embeddedLms" src="CANVAS_LMS_DOMAIN/courses/COURSEID/modules?embedded=true" width="100%" height="900px"></iframe>
</p>
<script>
  // 等待iframe加载完成
  document.getElementById('embeddedLms').onload = function() {
    const iframeDoc = this.contentDocument || this.contentWindow.document;
    
    // 处理已存在的所有链接
    const existingLinks = iframeDoc.querySelectorAll('a');
    existingLinks.forEach(link => {
      link.target = '_parent';
    });

    // 监听动态生成的链接（比如异步加载的内容）
    iframeDoc.addEventListener('click', function(e) {
      if (e.target.tagName === 'A') {
        e.preventDefault();
        window.parent.location.href = e.target.href;
      }
    });
  };
</script>

这段代码会覆盖iframe内所有链接的打开行为，包括后续动态生成的链接。

3. 无效方案说明 #

• 直接在iframe标签内写<head><base target="_parent"></head>：完全无效，iframe的内部文档由src加载，标签内的HTML不会被解析应用。
• 父页面添加<base target="_parent">：仅对父页面的链接生效，iframe是独立文档，无法继承该设置。

内容的提问来源于stack exchange，提问作者Ren Denim