iPhone Safari下调用window.open无法在新窗口打开URL怎么办

核心原因 #

iOS Safari的弹窗拦截规则要求window.open或者新标签跳转逻辑必须在用户主动触发的原生交互事件的同步执行栈中调用，且触发交互的元素必须是可见可交互的原生DOM元素。之前的方案失效有两个核心问题：

1. 使用display: none的隐藏元素触发点击，被Safari判定为非用户主动交互
2. PixiJS的点击事件是canvas内部封装的自定义事件，直接在回调里调用window.open容易被拦截

可行解决方案 #

步骤1：提前插入隐藏的原生跳转标签

不要用display: none，改用移出可视区域的方式隐藏，避免被Safari判定为非可交互元素：

<a id="jumpLink" target="_blank" style="position: fixed; left: -9999px; top: 0; opacity: 0; pointer-events: none;"></a>

步骤2：在Pixi点击回调最顶部同步触发跳转

跳转逻辑必须放在所有异步操作之前，保证在交互的同步执行栈内运行：

// 提前预获取跳转标签元素
const jumpLink = document.getElementById('jumpLink') as HTMLAnchorElement;

// Pixi容器的点击回调
yourPixiContainer.on('click', () => {
  // 第一行执行跳转逻辑，不要放在任何异步操作之后
  jumpLink.href = '你需要跳转的目标URL';
  jumpLink.click();

  // 后续再写其他业务逻辑
  // ...
})

注意事项 #

• 跳转逻辑必须放在点击回调的最顶部，所有异步操作（接口请求、定时器、Promise回调等）都要放在跳转逻辑之后
• 不要给<a>标签设置display: none、visibility: hidden属性，避免被Safari判定为非可交互元素
• 如果需要动态变更跳转地址，只要在触发click前同步修改href属性即可

内容的提问来源于stack exchange，提问作者anonymous-dev