如何使用JS/jQuery动态获取iframe内部跳转后的新URL路径？

浏览器同源策略有强制安全限制：只要iframe的src域名和父页面域名不一致，无法通过前端JS直接读取iframe内部的跳转后URL、DOM文档内容，这是浏览器底层的安全机制，没有纯前端的绕过方案。

以下是可落地的实现方案：

• 方法1：修正sandbox配置阻止顶层跳转
  之前sandbox配置不生效是因为授予的权限过多，仅开放地图运行必须的权限即可拦截顶层跳转，配置示例如下：

  <iframe 
    src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik"
    sandbox="allow-scripts allow-same-origin"
  >
  </iframe>
  

  该配置下iframe可以正常渲染地图、运行必要脚本，但触发顶层跳转的行为会被浏览器直接拦截。

• 方法2：代理iframe内容转为同源后获取跳转信息
  如果你确实需要拿到内部点击的跳转链接，可以通过自有服务端做反向代理，把openstreetmap的embed页面代理到和父页面相同的域名下，此时符合同源策略要求，可以直接操作iframe内部DOM，监听所有链接的点击事件获取跳转地址，示例JS代码如下：

  // 注意：仅代理后的同源iframe可正常运行以下代码
  const iframe = document.querySelector('iframe');
  iframe.onload = function() {
    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    // 绑定所有a标签的点击事件
    iframeDoc.querySelectorAll('a').forEach(aTag => {
      aTag.addEventListener('click', function(e) {
        e.preventDefault();
        // 获取目标跳转URL
        const targetUrl = this.href;
        console.log('捕获到跳转链接：', targetUrl);
        // 此处自行处理后续逻辑，比如是否允许跳转、跳转方式
      })
    })
  }
  

• 方法3：遮罩层拦截点击自定义逻辑
  不想做后端代理的情况下，可以在iframe上层覆盖一层透明的div遮罩，拦截所有点击事件，结合openstreetmap的公开坐标参数规则，自行构造对应位置的跳转链接，不需要读取iframe内部内容。

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