Safari控制台JS模拟点击上传框代码失效，Chrome可正常运行

遇到这种Safari和Chrome的兼容性问题太常见啦，我来帮你排查下原因并给出针对性的解决方案～

问题根源 #

Safari的安全策略比Chrome更严格，它会阻止非用户主动触发的文件选择框点击操作。简单来说，如果你的脚本不是由真实的用户交互（比如鼠标点击、触摸屏幕）直接触发的，而是通过setTimeout这类延迟脚本自动执行，Safari就会拦截这个模拟点击，防止恶意脚本偷偷触发文件选择。

具体解决方案 #

1. 直接定位隐藏的file input元素

很多上传组件会把真实的<input type="file">隐藏起来，用图标、按钮做视觉展示层。与其点击图标，不如直接找到这个核心的input元素触发点击，成功率更高：

setTimeout(function() {
  // 定位到所有上传容器
  let elements = document.querySelectorAll('.uP74h0hWZUzbcqM1doHG.IazVbeuKn6e3j5HwOjS7.newImgCreate');
  
  if (elements.length >= 3) {
    let thirdUploadBox = elements[2];
    // 直接找容器内的文件选择input
    let fileInput = thirdUploadBox.querySelector('input[type="file"]');
    
    if (fileInput) {
      // Safari对隐藏元素的点击支持差，临时显示元素
      const originalDisplay = fileInput.style.display;
      fileInput.style.display = 'block';
      
      // 创建一个"可信"的点击事件（模拟真实用户点击）
      const triggerClick = new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
        view: window
      });
      fileInput.dispatchEvent(triggerClick);
      
      // 恢复元素原来的显示状态
      fileInput.style.display = originalDisplay;
      console.log('已成功触发第三个上传框的文件选择');
    } else {
      console.log('没找到第三个上传框对应的file input元素');
    }
  } else {
    console.log('页面上的上传容器数量不足3个');
  }
}, 1000);

2. 把触发逻辑放到用户交互上下文里

Safari允许在用户主动触发的事件（比如click、keydown）回调里执行文件选择触发。你可以先让用户点击页面任意位置，再在这个点击事件里执行上传框触发：

// 给页面绑定一次点击事件，用户点击后触发上传框
document.addEventListener('click', function triggerUpload() {
  let elements = document.querySelectorAll('.uP74h0hWZUzbcqM1doHG.IazVbeuKn6e3j5HwOjS7.newImgCreate');
  
  if (elements.length >= 3) {
    let thirdUploadBox = elements[2];
    let fileInput = thirdUploadBox.querySelector('input[type="file"]');
    
    if (fileInput) {
      const triggerClick = new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
        view: window
      });
      fileInput.dispatchEvent(triggerClick);
      console.log('已触发第三个上传框');
    }
  }
  // 只执行一次，执行完移除监听
  document.removeEventListener('click', triggerUpload);
});

3. 检查元素的可交互状态

如果你的上传容器里的点击元素是disabled状态，或者有CSS阻止了点击（比如pointer-events: none），Safari也不会响应模拟点击。可以先在控制台执行clickableChild.disabled和getComputedStyle(clickableChild).pointerEvents检查状态，必要时先移除限制再触发点击。

备注：内容来源于stack exchange，提问作者ibooo