那些被瀏覽器阻止的模擬事件...

時間 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