Chrome中程序化触发<a>标签点击时忽略target属性问题求助

问题复现 #

页面中有带target="displayArea"的a标签及对应同名iframe：

<ul>
  <li><a target="displayArea" id="pre-select" href="foo.html">Foo</a></li>
  <li><a target="displayArea" href="bar.html">Bar</a></li>
  <li><a target="displayArea" href="baz.html">Baz</a></li>
</ul>

<iframe style="border: none;" name="displayArea" id="displayArea" width="100%" height="95%" title="Report Area"></iframe>

手动点击Foo链接时，内容正常显示在iframe中；但通过document.getElementById('pre-select').click();程序化触发点击时，内容短暂出现在主窗口后消失，未加载到iframe内。

原因分析 #

浏览器对用户手动触发的事件和脚本触发的事件有不同的安全策略：

• 手动点击属于浏览器认可的"可信用户交互"，会完整解析a标签的target属性，将跳转定向到指定iframe。
• 脚本触发的click()事件属于"非可信事件"，部分浏览器会忽略target属性的定向逻辑，直接触发主窗口的跳转；若页面存在其他自动重置或跳转逻辑（比如Django/Dojo的页面生命周期处理），就会出现内容闪一下消失的现象。

解决方案 #

方案1：直接设置iframe的src（最稳妥） #

绕过事件触发的问题，直接将a标签的href赋值给iframe的src属性：

const targetIframe = document.getElementById('displayArea');
const preSelectLink = document.getElementById('pre-select');
targetIframe.src = preSelectLink.href;

这种方式无需依赖事件触发逻辑，直接控制iframe加载内容，兼容性最好。

方案2：绑定点击事件手动控制跳转 #

给a标签绑定点击事件，阻止默认跳转行为，强制将内容加载到iframe：

const preSelectLink = document.getElementById('pre-select');
preSelectLink.addEventListener('click', function(e) {
  // 阻止主窗口的默认跳转
  e.preventDefault();
  // 让目标iframe加载链接内容
  document.getElementById('displayArea').src = this.href;
});

设置后，无论是手动点击还是脚本调用click()，都会执行这段逻辑，确保内容加载到iframe中。

方案3：模拟可信用户事件（部分浏览器支持） #

创建一个模拟用户交互的鼠标事件，部分浏览器会认可这种事件的可信性：

const preSelectLink = document.getElementById('pre-select');
const clickEvent = new MouseEvent('click', {
  bubbles: true,
  cancelable: true,
  view: window
});
preSelectLink.dispatchEvent(clickEvent);

注意：isTrusted属性为只读，无法手动设置，因此该方案兼容性不如前两种，但可作为备选尝试。

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