那些被浏览器阻止的模拟事件...

时间 2021-07-22

标签 html jquery 编程 api 浏览器安全函数网站 spa code 栏目浏览器繁體版

原文原文链接

浏览器里面咱们并不能愉快的用js模拟鼠标和键盘事件, 连最经常使用的click方法都收到许多限制, 好比在init函数中执行file_input.click()之类的. 咱们能够快速查看使用HTML和JavaScript的文件上传。现在，许多网站再也不显示原始<input type="file">元素。以Facebook为例：html

当您单击上面突出显示的照片按钮时，将打开本机文件对话框：jquery

在现代浏览器中使这些功能发挥做用并不难。从本质上讲，<input type="file">只要点击照片按钮，它就能够在隐藏时触发点击事件。这是一个很小但却有效的HTML示例，能够重现该功能：编程

<html> <body> <input type="file" style="display: none" /> <button>Open File Dialog</button> <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <script> $("button").on("click", function() { $("input").trigger("click"); }); </script> </body> </html>

事实上，若是咱们尝试一下，单击“打开文件对话框”按钮将打开文件对话框，正如咱们所指望的那样。如今让咱们尝试在页面加载后当即自动打开文件对话框：api

<script> $("input").trigger("click"); </script>

这彷佛不起做用。会不会是页面构建过程一些api没有准备好呢, 因而我settimeout以后再调用:浏览器

<script> setTimeout(function() { $("input").trigger("click"); }, 1000); </script>

这彷佛也不起做用。为何在第一个例子中，文件对话框已成功打开？第一个示例有效的缘由是click事件是在代码块中触发的，该代码块是用户启动的事件的处理程序。安全

当咱们单击按钮时，已执行已注册的处理程序功能，而且浏览器会跟踪启动该按钮单击事件的用户的事实，而不是某些代码。在此类用户启动的事件以外，没法以编程方式打开文件对话框。函数

相似地，当window.open()未在用户启动的事件的处理程序内调用时，现代浏览器一般不会打开新窗口。相反，他们会显示以下警告：网站

讽刺的是, 在console接口中是能够愉快的模拟的, 由于此时的你是用户, 不过话又说回来了, 就算在初始化总共模拟了打开文件对画框或者弹出一个新的页面并不会形成什么安全问题, 咱们甚至能够给body监听一个mouseenter事件(发生几率99%)而后让浏览器觉得是用户触发了咱们想要执行的代码, 或者经过其余欺骗用户的无聊手段, 但仔细想一想也没什么意义....spa

总之这是一个坑把, 在之后的chromium中应该会改善, 至少目前是不能在网页打开的时候马上启动文件对话框的..code