使用文件输入后，Javascript 警报会锁定 IOS Chrome 上的页面

Posted 2023-03-14

【中文标题】使用文件输入后，Javascript 警报会锁定 IOS Chrome 上的页面

【英文标题】：Javascript alert locks up page on IOS Chrome after using a file input

【发布时间】：2019-03-08 01:43:52

【问题描述】：

这是 Chrome 的问题还是我做错了什么？我注意到，如果我使用文件输入元素来显示文件浏览器/相机提示，然后使用会导致警告消息的内容进行跟进，它会锁定整个页面，迫使我杀死应用程序以使事情正常工作再次。这是一个显示问题的简单 jsfiddle：

https://jsfiddle.net/etc4bxpq/

html：

<input type="file">
<button id="btn">Click me</button>

JS：

document.querySelector('#btn').addEventListener('click', event => 
  alert(1);
);

点击文件输入，然后点击“单击我”按钮。警报不会触发，页面将被锁定。它似乎只发生在 ios 上的 Chrome 上。 Safari 似乎运行良好。

【问题讨论】：

你尝试过旧的 ES5 格式吗？

是的，这似乎无关紧要。尝试触发警报会锁定浏览器

呃，好像是iOS的bug！

【参考方案1】：

在相同条件下出现相同错误。我尝试按照一些人的建议使用 setTimeout 函数包装我的警报和提示，但它对我不起作用，尝试将输入放在另一个页面中并在 iframe 中调用它，对我也不起作用。唯一对我有用的解决方案是使用警报模式而不是本机 javascript 警报和提示功能。此外，如果您打开 chrome 设置菜单并关闭它，脚本会继续执行，这很奇怪。

【讨论】：

到目前为止，modals 也成为了我想出的解决方案，但我还是想知道为什么原生警报会导致问题（除非它实际上是 ios 浏览器的错误）。