2022-07-28

一個奇異的坑:window.alert() 作用在 android chrome app 中

 今天在協助同事處理一個問題,此問題是這樣的

網頁中使用 onScan.js 來做 barcode scanner 的動作,同事的操作的殾用帶有 scanner 功能的 android pda 開同事寫好的網頁,預設的動作是:利用 scanner 掃描某一編號而成的 QRcode,由 scanner 解析完的文字拿去到一個 json 中搜尋,若找不到資料就回饋 window.alert("查無資料") 後,就進行 window.location.reload()

此狀況,如果是在筆電或桌機的環境,使用 chrome 開網頁,然後電腦用的 scanner 是用 usb 外接的,以上的操作一切正常。

但改用帶有 scanner 的 android pda 時,window.alert() => window.location.reload() 前的動的作一切正常,但 reload() 後,想再接著掃描編號一定存在的 QRcode 時就發現怎麼掃描資料都進不去網頁中。

同事找在下處理時,是因為該 onScan.js 套件是在下推的,而 onScan.js 的用法也是在下寫的,而同事只有將相關用法寫成 js module 的方式來載入而已。

本來一開始在下還以為會不會是載入順序造成異常,但確沒發現 console 有錯誤。

後來在測試宣告時發現,假設我在 onloaded 後要求畫面上的一個 input trigger('focus') ,在reload 前,該 input 確實會出現 onfocus 的效果(假設是邊框會變深色),但 reload 後卻出現的狀況是沒有 onfocus…

交叉測試了許久才發現…原來在 android 的 chrome 中,當網頁使用 window.alert(),在按下 alert 的確定按鈕後,發現 chrome 會變成不是當前作用中的 app,等於 chrome blur 了,不是 chrome 中的網頁或該網頁的元件本來 focus 變 blur 了,而是 chrome 這個 app 不是作用中視窗了…所以該網頁中的 script 操作其實還是有在運行,只是…因為 scanner 要把掃描解析後的結果只能輸入進當前作用中的 app 畫面中…結果因為表面上畫面還是在 chrome 中,但實際上 chrome 已是非作用中的 app了…

這狀況在電腦中有點類似,你打開記事本在裡面打字,然後你滑鼠移到工具列上空白處點了一下,這次當前作用中視窗就由記事本變成了「工具列」了…

由於此狀況的坑非常特別,所以特來記錄(也許…window.confirm() 也有一樣的情況)