是否可以使用 Javascript 捕获浏览器的文件打开/保存对话框事件

2024-01-02

使用 Javascript 可以监听浏览器的文件打开/保存对话框事件。当我收到保存文件对话框现已打开的通知时,我想执行一项操作。具体来说,我想在对话框打开时隐藏加载微调器(但这很可能是任何其他操作)

我相信我可以为我创建的对话框执行此操作,但不确定是否可以为浏览器的标准对话框执行此操作。

对此的任何指示都会非常有帮助。


是的!您可以利用大多数浏览器(在 Chrome、Firefox 和 IE 上测试良好)都会触发beforeunload在“单个文件下载”对话框打开之前发生的事件。

所以像这样的代码将起作用:

$(window).bind ("beforeunload",  function (zEvent) {
    // PERFORM DESIRED ACTIONS HERE.
    /* This code will fire just before the Individual-file Download 
       dialog opens.
       Note that it will also fire before the tab or window is closed, 
       but that should not be a problem for this application.
    */
} );


打开并运行此代码片段以查看其实际效果:

$(window).bind ("beforeunload",  function (zEvent) {
    $("#dwnldStatus").text ("This code runs just before the file open/save dialog pops up.");
} );

$("#directDwnload").click ( function () {
    fireDownload ();
} );

$("#ResetTimer").click ( function () {
    $("#dwnldStatus").html (
        'Download will start in <span id="timeleft">3</span> seconds.'
    );
    fireTimer (3);
} );

function fireDownload () {
    window.location.assign (
        "//phs.googlecode.com/files/Download%20File%20Test.zip"
    );
}

function fireTimer (secondsLeft) {
    this.secondsLeft    = secondsLeft || 30;
    this.countdownTimer = this.countdownTimer || null;

    if ( ! this.countdownTimer) {
        this.countdownTimer = setInterval ( function() {
                this.secondsLeft--;
                $("#timeleft").text (this.secondsLeft);
                if (this.secondsLeft <= 0) {
                    clearInterval (this.countdownTimer);
                    this.countdownTimer = null;
                    fireDownload ();
                }
            },
            1000
        );
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p>Activate one of the download buttons.  The timer button is just like any other javascript initiated download, no additional  click is needed.</p>
<p>The javascript detects when the File/Save dialog pops up and changes the status to "This code runs just before the file open/save dialog pops up.".</p>
<p>Note that it is not necessary to download the file. You can cancel the download.</p>

<div id="dwnldStatus"></div>
<button id="ResetTimer">Set timer to 3 seconds.</button>
<button id="directDwnload">Download the file now.</button>

注意beforeunload也会在选项卡或窗口关闭之前触发,因此请相应计划。正如所述,这不应该成为这个问题的问题。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

是否可以使用 Javascript 捕获浏览器的文件打开/保存对话框事件 的相关文章

  • Google App Engine:修改云运行环境

    我正在尝试部署一个使用自定义 Node js 服务器的 Next js 应用程序 我想将自定义构建变量注入应用程序 next config js const NODE ENV process env NODE ENV const envTy
  • 如何抑制窗口鼠标滚轮滚动...?

    我正在开发嵌入页面中的画布应用程序 我有它 因此您可以使用鼠标滚轮放大绘图 但不幸的是 这会滚动页面 因为它是文章的一部分 当我在 dom 元素上滚动鼠标滚轮时 是否可以阻止鼠标滚轮在窗口上滚动 附加鼠标滚轮 不是 Gecko DOMMou
  • 为什么是 javascript:history.go(-1);无法在移动设备上工作?

    首先 一些背景 我有一个向用户呈现搜索页面 html 表单 的应用程序 填写标准并单击 搜索 按钮后 结果将显示在标准部分下方 在结果列表中 您可以通过单击将您带到新页面的链接来查看单个结果的详细信息 在详细信息页面中 我添加了一个 返回结
  • 使用 KnockoutJs 映射插件进行递归模板化

    我正在尝试使用以下方法在树上进行递归模板化ko映射 插入 http knockoutjs com documentation plugins mapping html 但我无法渲染它 除非我定义separate每个级别的模板 在以下情况下
  • 跟踪用户何时点击浏览器上的后退按钮

    是否可以检测用户何时单击浏览器的后退按钮 我有一个 Ajax 应用程序 如果我可以检测到用户何时单击后退按钮 我可以显示适当的数据 任何使用 PHP JavaScript 的解决方案都是优选的 任何语言的解决方案都可以 只需要我可以翻译成
  • 动态地将工具提示文本设置为 div 元素

    我正在尝试动态地将工具提示文本设置为容器 div 并对我刚刚添加到有序列表的每个 div 元素 elem Alias Status 使用 jQuery function addNewElement elem var li li li li
  • 表单计算器脚本基本价格未加载 OnLoad

    我的表单中有一个计算器来计算我的下拉选项选择 function select calculate on change calc input type checkbox calculate on click calc function cal
  • 通过 CDN 使用 Dojo 时如何加载自定义 AMD 模块?

    我正在使用 google 的 CDN 并尝试使用他们的加载程序加载我自己的 AMD 模块 我知道我做错了什么 但我被困住了 有任何想法吗
  • 如何使输入字段和提交按钮变灰

    我想变灰这两件事 http doorsplit heroku com 歌曲输入字段和提交按钮 直到用户输入艺术家 有没有一种简单的方法可以通过 JQuery 来做到这一点 艺术家输入字段的id是 request artist 你可以这样做
  • Firefox 书签探索未超过 Javascript 的第一级

    我已经编写了一些代码来探索我的 Firefox 书签 但我只获得了第一级书签 即我没有获得文件夹中的链接 e g 搜索引擎 雅虎网站 谷歌网站 在此示例中 我只能访问 Search engines 和 google com 不能访问 yah
  • 提交表单并重定向页面

    我在 SO 上看到了很多与此相关的其他问题 但没有一个对我有用 我正在尝试提交POST表单 然后将用户重定向到另一个页面 但我无法同时实现这两种情况 我可以获取重定向或帖子 但不能同时获取两者 这是我现在所拥有的
  • Angular 2+ 安全性;保护服务器上的延迟加载模块

    我有一个 Angular 2 应用程序 用户可以在其中输入个人数据 该数据在应用程序的另一部分进行分析 该部分仅适用于具有特定权限的人员 问题是我们不想让未经授权的人知道how我们正在分析这些数据 因此 如果他们能够在应用程序中查看模板 那
  • 如何使用 JQuery 动态排序

    如果我有一个下拉列表和一个列表框 有没有办法使用 JQuery 根据下拉列表对列表框进行排序 举个例子会很有帮助 这会改变下拉菜单中的顺序 您必须根据自己的标准设置顺序
  • Laravel 中只向登录用户显示按钮

    如果我以 John 身份登录 如何才能只显示 John 的红色按钮而不显示 Susan 的红色按钮 测试系统环境 Win10 Laravel5 4 Mysql5 7 19 table class table table responsive
  • 为 illustrator 导出脚本以保存为 web jpg

    任何人都可以帮我为 illustrator CC2017 编写一个脚本 将文件以 JPG 格式导出到网络 旧版 然后保存文件并关闭 我有 700 个文件 每个文件有 2 个画板 单击 文件 gt 导出 gt 另存为 Web 旧版 然后右键文
  • 为什么在 Internet Explorer 中访问 localStorage 对象会引发错误?

    我正在解决一个客户端问题 Modernizr 意外地没有检测到对localStorageInternet Explorer 9 中的对象 我的页面正确使用 HTML 5 文档类型 并且开发人员工具报告该页面具有 IE9 的浏览器模式和 IE
  • 如何获取给定 DOM 元素的所有定义的 CSS 选择器?

    如何使用 jQuery 获取给定 DOM 元素的所有定义的 CSS 选择器 定义后 我的意思是在应用于任何样式表的所有 CSS 选择器document 在某种程度上 这类似于 FireBug 实现的功能 其中显示所选 DOM 元素的所有应用
  • 如何获取浏览器视口中当前显示的内容

    如何获取当前正在显示长文档的哪一部分的指示 例如 如果我的 html 包含 1 000 行 1 2 3 9991000 并且用户位于显示第 500 行的中间附近 那么我想得到 500 n501 n502 或类似的内容 显然 大多数场景都会比
  • 在 React.js 中编辑丰富的数据结构

    我正在尝试为数据结构创建一个简单的基于网格的编辑器 但我在使用 React js 时遇到了一些概念问题 他们的文档对此没有太大帮助 所以我希望这里有人可以提供帮助 首先 将状态从外部组件传输到内部组件的正确方法是什么 是否有可能将内部组件中
  • 如何从图像输入中获取 xy 坐标?

    我有一个输入设置为图像类型

随机推荐