Tip:
Highlight text to annotate it
X
大家好,我是逆道者
我在第四集留了一個疑問
就是AHK到底能不能控制網頁元素
如果要給一個最直接的答案
其實是「不能」
因為AHK是被設計用來自動化Window元件的
能夠操作網頁元素的,只有一種語言
那就是 Javascript
但是,先別氣餒
我們在打任何程式語言的時候,都需要用到鍵盤
而說到鍵盤
不就是AHK的領域了嗎?
於是我就想到
我們或許可以用AHK來模擬鍵盤輸入
寫一個 Javascript 去控制網頁元素
這個流程該怎麼實行呢?
首先我從 Javascript 如何控制網頁元素說起
到這裡你可能會想
阿~是不是要再多學一個語言了
請不用擔心
其實我對 Javascript 也只是懂一點皮毛而已
操作網頁元素的程式碼通常也只要會一行
甚至半行就可以搞定
那我們開始吧
首先我們以台鐵的訂票網頁作為範例
按下F12 側邊會跳出一個控制台
切到 Console 這個分頁
這裡就是輸入 Javascript 程式碼的地方
我們可以試著輸入 alert(123) 執行跳出視窗的指令
輸入完按下Enter
確認它是可以正常運行的
接著 如果我們想要模擬點擊的動作
例如點擊右上角的Language 顯示語言清單
那麼 Javascript 要怎麼寫呢?
第一步就是對我們要點擊的項目按右鍵
選擇檢查
它會顯示這個網頁元素 在HTML結構中的位置
我們對著反白的區塊按右鍵
選擇 Copy > Copy JS path
然後再切換回 Console 分頁
按下 Ctrl+V 貼上
你會發現這個項目會被標記出來
代表 Javascript 已經抓到這個網頁元素了
接下來我們只要在後面打上 .click() 然後按下Enter
它就會被點擊一次
我們同樣可以按向上的方向鍵 (↑)
回復剛剛的輸入
再按一次Enter
它就會被點擊第二次而收回
是不是很簡單呢
改寫文字框的內容也是差不多的步驟
按右鍵檢查元素
再按右鍵,複製 JS path
然後到 Console 分頁貼上
確認文字框亮起後
在後面接著輸入 .value= 「一個夾帶雙引號的日期」
按下 Enter 就可以改寫文字框的內容了
這邊要注意 雙引號一定要加上去
否則你會得到一串小數點
而下拉式選單的也是一樣的做法
獲取元素的JS Path之後
也可以在後面打.value 的語法 改寫成我們想要的內容
或者用 .selectedIndex=0 改成選單裡的第一個項目
等於1則是選擇第二個項目
第三、第四項以此類推
好了,以上就是 Javascript 這部分的介紹
什麼?
你問我能不能勾選「我不是機器人」?
我不知道欸@@ 我們來試試看
現在這裡有一些打好的 Javascript 指令
每一行的指令後面我會加上分號 (;) 代表斷行
把它們全部複製起來
貼到 Console 裡面送出
它就會自動幫我填寫好所有的內容
最後再送出點擊查詢的指令
就會得到班次的查詢結果
於是
我們要怎麼把這些程式碼 透過AHK餵給瀏覽器呢?
用模擬鍵盤按下 F12 打開控制板嗎
恩~ 不對
因為開啟控制板會有延遲時間
會導致執行失敗
我們可以在網址列上面執行 Javascript
只要在開頭打 javascript 冒號 後面就可以打上程式碼了
目前為止,所有流程都已經連上了
控制網頁元素的完整的AHK程式碼
可以寫成這個樣子
這裡我先用Ctrl+Q作為觸發事件的快捷鍵範例
第一步我們送出 Alt+D 讓滑鼠(游標)聚焦在網址列上
在這裡你也可以改成送出 Ctrl+L
或送出 F6 來達到一樣的效果
接著在開頭輸入 Javascript 加上冒號
下一步就是覆寫剪貼簿的內容
中間這段就是我們要覆寫的文字 也就是剛剛的Javascript程式碼
關於這段我查了一下
AHK的寫法好像一定要這樣
上下兩個括號這種奇怪的形式才會成功
接著是送出Ctrl+V 在網址列貼上程式碼
最後按下Enter送出
然後不要忘了結尾加上 return 作為結束
把這個筆記本存成 .ahk 檔
並設定編碼為「具有BOM的UTF-8」格式
這樣才不會出現亂碼
存好以後 使用AHK開啟這個檔案
然後 回到台鐵的網頁
按下 Ctrl+Q 就會直接顯示 班次的查詢結果了
回到我們在第四集結尾的提問
Evernote 筆記本的展開和收縮按鈕
雖然顏色會改變,導致圖片無法偵測、點擊
但是我們依然可以透過鎖定網頁元素進行點擊
設定快捷鍵做展開和收縮
不過有些網頁點擊的項目並不太好鎖定
像 Youtube 的點讚按鈕 你會發現元素重疊了好幾層
這時候你只能一個一個嘗試
看看哪一個執行點擊的語法之後是會有效果的
今天的影片就到這邊
關於其他細節和注意事項
礙於篇幅的關係 我會把寫在下方的留言
希望這集的影片有幫助到大家
如果喜歡的不妨點個讚並追蹤這個頻道
那我們下隻影片見囉 掰掰