網頁上使用按鍵代替鼠標點擊按鈕

技術分享,絕對乾貨

在長時間使用網頁進行點擊事件工作時,或者要使用快捷鍵點擊某個按鈕時,而網頁又沒有對應的快捷鍵怎麼辦,我來給你出個招。

首先下載最新版的谷歌,打開網頁百度谷歌瀏覽器下載,找到官網,下載安裝。如下圖。

 

OK,我們需要在谷歌中利用谷歌插件進行代碼開發,自己實現快捷操作,這聽起來需要代碼開發是不是感覺到自己不會弄,不要擔心,看完再說。

首先谷歌插件是非常豐富的,有趣並好玩的,可能很多小夥伴會因爲無法訪問的問題不能在谷歌瀏覽器內下載, 這裏大家需要在瀏覽器外部下載好在進行安裝了,這裏推薦大家下載插件的網址放下面了。

http://www.cnplugins.com/

這個網站裏面有教大家離線安裝的辦法,大家自行搜索。如果還不懂,就評論區留言吧。

谷歌插件可以實現該功能的我發現了兩款,

第一,Tampermonkey,是一款免費的瀏覽器擴展和最爲流行的用戶腳本管理器。

第二,Shortkeys (Custom Keyboard Shortcuts),快捷鍵(自定義鍵盤快捷鍵)。

第一款Tampermonkey是推薦具備一定前端編程基礎的小夥伴使用,主要是通過獲取網頁的前端代碼,進行分析,通過在腳本里面向網頁發起前端代碼點擊事件,可以實現全自動化,半自動,按鍵手動等等,因爲是開發,能實現到什麼程度就看你的編碼能力與你思考問題的能力有多強了。

第二款不需要前端編程基礎也可以使用,不過需要具備一定的思考分析能力。需要在我的指導下找出使用哪一種點擊方案,填寫目標代碼實現功能,這個就比較侷限了,只能實現按鍵代替鼠標點擊某個按鈕。

接下來我們就下載Shortkeys,在插件網內的下載版本較低,也可以使用,這裏我提供我用的給大家下載。

https://download.csdn.net/download/qq_33517844/11504314

下載後解壓

然後打開谷歌的拓展插件,打開開發者模式

選中你解壓後的文件夾

然後就出現

這個表示打開狀態

然後瀏覽器右上角就會出現

這個就是我們安裝的插件。我們點擊進去編輯。

出現編輯頁面

Behavior點擊是選擇一些通用的配置,第一個是網頁滑動到頂部,第二個是網頁滑動到底部,下面還有很多,就需要大家去發現了,這個實現的功能是,打開網頁後,按q鍵可以快速運行Behavior內的配置,比如我Behavior選Scroll to bottom 然後保存,然後打開百度,隨便百度點什麼,然後點擊q鍵,就可以滑動百度底部。

這些都是簡單操作。我們自定義快捷鍵需要下面這個配置,Behavior內選擇Run JavaScript,然後下面出現一個文本輸入框,就是輸入我們的代碼實現點擊事件。

 

這個是帶有id屬性與class屬性的這個後面會說,現在我們使用id屬性的su

實現的功能就是點擊q鍵就相當於鼠標點擊百度一下,

document.getElementById("su").click();

然後我們什麼也不輸入,點擊q鍵,就會發現一直在刷新網頁,跟用鼠標點擊一樣。

但如果沒有id字段怎麼辦。

大家就要根據我的提示來了

如果有id字段或class字段

id字段的使用id後的字符su放入下面括號內就可以得到目標代碼

document.getElementById('su').click();

class字段的使用class後的字符bg s_btn放入下面括號內就可以得到目標代碼

document.getElementsByClassName('bg s_btn')[0].click();

兩個都有隨便使用一種

如果兩種都沒有,就使用value屬性

document.querySelector('[value="百度一下"]').click();

如果value屬性有多個,根據顯示的順序,從0開始嗎

document.querySelectorAll('[value="百度一下"]')[0].click();
document.querySelectorAll('[value="百度一下"]')[1].click();

這樣就可以實現大部分網頁點擊自定義快捷鍵。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章