在下载文件时阻止用户交互的正确方法是什么？

Question

好的，这是关于浏览器交互和HTTP机制的一般性问题

这是方案

1. 有一个非常丰富的界面，有很多按钮。
2. 用户点击“生成报告”按钮
3. 然后加载时间约为15秒，然后出现“保存文件”对话框
4. 用户将文件保存在他希望的任何地方，并做更多的事情。

现在我想：

• 在步骤3中阻止他与界面交互。
• 在第3步结束时，触发一些特定的javascript，例如显示弹出窗口。

所有这些实际上总结为“如何在javascript 中检测下载对话框的外观”，因为一旦解决了这个问题，在文件生成过程中很容易设置一些掩码，并且在检测到事件后执行任何操作。

不幸的是，似乎没有办法通过Ajax启动文件下载，因为它没有足够的处理方法将XMLHttpRequest转换为另存为对话框。因此，您需要提交一些表单，但机制有点奇怪，因为虽然您提交表单，但DOM中没有任何事情发生。然后浏览器检测到对表单提交的响应是传入文件并显示下载框而不是尝试显示文件内容，一旦用户完成下载框，浏览器就会以某种方式设法恢复其先前的界面状态，以便用户可以继续浏览（或至少这是我理解的事情）。

Answer 1

有趣的问题，实质上你不能阻止用户做任何事情......如果这样的话，他们可能会这样做：

• 关闭浏览器
• 直接输入网址以转到新页面
• 点击浏览器
• 打开新的浏览器窗口并再次导航到报告生成页面
• 刷新页面

所以，如果你有一个长期运行的过程，那么处理它的好方法是：

• 表示该过程可能需要一段时间
• 报告准备就绪时，会提供指向生成的报告的唯一链接
  • 如果您使用的是像AngularJS这样的javascript框架，则可以在报告准备就绪时异步处理显示报告下载/查看链接的事件。

Answer 2

显示x秒的加载标志，禁用点击事件（请参阅here）或将其替换为对话框，说明加载时应保持安静。
不要忘记让装载标志移动/显示进度或他们会感到无聊。我确信有很多库可以实现这一点，你甚至可以尝试使用＆lt;'progress'＆gt;标签。
正如@ j3r3m7所说，如果他们想要关闭浏览器，他们会;这里的目标是让用户明白他必须等待x秒并让他急于等待。

关于您的其他问题，请查看here

编辑：可以找到解决此类问题的有用插件here。