iFrame动态赋值链接新标签页打开遭Chrome拦截问题咨询

我有一个包含iFrame的页面，该iFrame通过jQuery实现Ajax服务端通信。iFrame内存在多个需点击后在新标签页或弹窗打开的链接：

• 静态固定URL链接可正常工作，示例代码：

<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">Google Test</a>

• 另一链接需根据服务端查询结果动态赋值URL，初始代码：

<a href="#" id="documentLink"  rel="noopener noreferrer" target="_blank">
    <img alt="PDF" src="../images/icons/icon_pdf.svg" style="width:30px;height:30px;margin-right:15px;">
    <span>View Report</span>
</a>

通过以下jQuery代码赋值URL：

$( '#documentLink' ).attr('href',data.documentLinkClickable);

点击该链接时新标签页打开，但Chrome提示“my_domain被拦截”（ERR_BLOCKED_BY_CLIENT），复制URL在隐私窗口可正常打开。尝试改用window.open弹窗打开，代码如下：

$( '#documentLink' ).attr('onclick','javascript:window.open("'+data.documentLinkClickable+'","_blank","toolbar=0, location=0, menubar=0, height=800, width=1200"); return false;');

仍遭遇相同拦截问题。当前iFrame配置：

<iframe id="25_IFrame2" class="iframe" sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-modals allow-downloads" src="https://my_domain/my_page?my_parameter" scrolling="yes" style="width: 1903px; height: 489px;"></iframe>

原因分析 #

Chrome的弹窗/新标签页拦截机制核心是区分用户主动触发的交互和脚本异步触发的操作：

• 静态链接是用户直接点击浏览器原生的<a>元素，属于明确的用户主动行为，浏览器判定为可信，不会拦截。
• 动态链接的问题出在两点：
  1. 初始href="#"让浏览器将点击事件标记为锚点跳转，后续异步修改href后，浏览器的交互判定逻辑已经固化，不会重新识别为可信的外部链接跳转。
  2. 无论是修改href还是绑定onclick的window.open，都是在Ajax异步回调中完成的——这个回调不属于用户点击的同步上下文，Chrome会认为这是脚本自发触发的弹窗，而非用户主动请求，因此触发拦截。

解决方案 #

方案1：在用户点击的同步上下文内打开链接 #

不要提前通过Ajax赋值，确保在用户点击链接的瞬间，URL已经准备好（提前缓存或同步请求），直接在点击事件里打开：

// 提前通过Ajax预加载并缓存链接地址
let cachedLink = null;
$.ajax({
  url: '你的接口地址',
  success: function(data) {
    cachedLink = data.documentLinkClickable;
  }
});

// 绑定点击事件
$('#documentLink').on('click', function(e) {
  e.preventDefault();
  if (cachedLink) {
    // 直接在用户点击的同步上下文里调用window.open
    window.open(cachedLink, '_blank', 'toolbar=0, location=0, menubar=0, height=800, width=1200');
  } else {
    // 若必须实时获取，用同步请求（不推荐，会阻塞页面）
    $.ajax({
      url: '你的接口地址',
      async: false,
      success: function(data) {
        window.open(data.documentLinkClickable, '_blank', 'toolbar=0, location=0, menubar=0, height=800, width=1200');
      }
    });
  }
});

方案2：动态创建完整的链接元素 #

在Ajax请求完成后，直接替换掉原来的占位元素，生成一个全新的<a>标签——用户点击这个新元素时，是原生的主动交互，不会被拦截：

$.ajax({
  url: '你的接口地址',
  success: function(data) {
    const newLink = $(`
      <a href="${data.documentLinkClickable}" target="_blank" rel="noopener noreferrer">
        <img alt="PDF" src="../images/icons/icon_pdf.svg" style="width:30px;height:30px;margin-right:15px;">
        <span>View Report</span>
      </a>
    `);
    // 替换原占位元素
    $('#documentLink').replaceWith(newLink);
  }
});

方案3：调整iFrame沙箱配置（跨域场景） #

如果打开的是跨域链接，在iFrame的sandbox属性中添加allow-popups-to-escape-sandbox，允许弹窗跳出沙箱限制：

<iframe id="25_IFrame2" class="iframe" sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-modals allow-downloads" src="https://my_domain/my_page?my_parameter" scrolling="yes" style="width: 1903px; height: 489px;"></iframe>

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