昨天在試 Android WebView 這個元件,發現整個速度跟瀏覽器完全沒得比,包括内建瀏覽器、Chrome、Firefox、Opera …。每種瀏覽器的速度都比 WebView 快上許多 … 小蛙跟許多人一樣巴不得把 chrome 塞進 app 裡面!網路上有些人推薦 chromeview,不過有一些 bug 以及對於比較低 API 的 app 是沒辦法使用的!這篇記錄小蛙遇到 WebView 在載入網頁的時候遇到 Uncaught TypeError 錯誤的解決方法。

小蛙之前只拿 WebView 來做簡單的頁面呈現,例如:我的股票精算師的新聞頁面(讀取url)、我的郵局便利查的ATM及郵局頁面(讀取assets)、Micat發現幸福的文章頁面(讀取url)。速度感覺沒有瀏覽器快但還算是可以接受!這次小蛙測試了幾個網頁,包括:小蛙的部落格-蛙齋生活蛙齋奇摩拍賣(會自動轉成手機版) … 等網頁,結構越複雜的網頁就越慢 … 但是特別的是奇摩拍賣手機版網頁,竟然也可以慢到如此誇張 … 不怪 WebView,因為就連直接用 Chrome 開啟都要花很長的一段時間,問題出在整個頁面載入完成之後,又做了大量的 DOM 操作,像是動態選單建立,動態元件 … 等等。奇摩拍賣放進了太多功能,造成整個效能低落 … (也許是小蛙自己的感覺有問題 … )!

webview.png

上圖是奇摩拍賣手機版放入 WebView 的畫面,小小一個頁面上有著非常多功能,左上角的找商品、右上角的會員、中間上方搜尋、中間選單、中間下面拍賣品陳列;但這個頁面其實有兩個部份在 WebView 中開啟的時候發生了錯誤(紅框部份)!小蛙試了很久紅框部份應該要出現動態選單,在這邊卻遲遲未出現,造成該頁面既有功能癱瘓掉 … 下圖才是正常的頁面 (用 Chrome 開啟)

webviw2.png

找了好久找不到問題在哪邊,後來在 Logcat 中發現一行關鍵的錯誤

08-08 10:04:45.990: E/Web Console(3324): Uncaught TypeError: Cannot call method 'getItem' of null at http://l.yimg.com/tu/90e25deb72225483a6103a633c757035.js:1

當時小蛙還異想天開的以為是 WebViewClient.onReceivedError 或是 WebViewClient.onLoadResource 丟出這個令人覺得大心的錯誤,如果直接把網址貼上瀏覽器會發生錯誤,把後面的 :1 刪掉就可以正常讀取該 js,那只要在 WebViewClient.onLoadResource 讀取資源的時候,把 :1 這種造成錯誤的字元過濾掉就好了,把動作加上去之後發現,事情絕對沒有笨蛋想的那麼簡單 … 這個錯誤的拋出跟上面提到那兩個 function 一點關係都沒有 … 錯誤依然存在,跑不出來的功能依然跑不出來!

Google 一下發現有很多人都遇到這個問題,解決的方法很簡單,這個錯誤的引起是因為剛剛一開始有提到該網頁是在 DOM 載入之後才開始對 DOM 元素進行操作,這邊有提到 WebSettings.setDomStorageEnabled(boolean)

public synchronized void setDomStorageEnabled (boolean flag)
Sets whether the DOM storage API is enabled. The default value is false.

預設是不做 DOM 儲存的動作,也就是說在整個網頁載入完成之後並不把 DOM tree 儲存起來,所以導致後續對於 DOM 元素的操作,因為找不到這棵 tree 而發生錯誤,只要加上以下這行

wv.getSettings().setDomStorageEnabled(true);

問題就解決了!這次使用 WebView 來做一些東西加上整個切換成 fragment 的方式,應該會遇到不少問題!黃小蛙,加油!

相關文章

程式作品

小蛙做過的作品,包含自行開發、工作成果、與朋友合作 ...
2013-08-10 13:54:45
hans

1

wayStorm 威數意動 (kuAD, kuSOGI) 請款流程

又是一次隔了好久才進行的請款 ... 整個過程有點模糊了,每次要請款都要去翻以前的 email,邊看記錄邊回想,因為有些是透過電話聯絡!想說乾脆記下來好了,免得每次都要大費周章浪費不少時間。
2013-08-25 12:21:29
hans

1

遠傳 FET WiFi, WIFLY 連線教學

小蛙在 免費WIFI介紹 – *WIFLY(遠傳含前Seednet用戶), *FET wifi(遠傳含前Seednet用戶), Fami wif
2013-08-25 13:43:49
hans

1

全台超商龍頭 7-11 提供免費 WiFi – (7WiFi) 連線教學

全台灣超商龍頭 7-11 提供免費 WiFi 已不是新聞,小蛙這邊還是記錄一下申請及連線方式,讓小蛙的姐姐或其他有需要的網友取用。

2013-08-25 13:44:41
hans

1

tomcat 下載檔案卻直接亂碼開啟 at IE 10

上星期五接到一張 ticket 內容大概是網站上提供下載 .msi 的安裝檔案,在經過測試後大部分瀏覽器都可以正常下載檔案,唯獨漏掉測試的 IE 10 會出現問題,IE 10 會把 .msi 檔案當作文字檔一般開啟,在頁面上印出一堆亂碼,簡
2013-09-02 20:37:48
hans

1

透過 pptpd 架設 VPN

這篇文章很久以前就想 post 了,不過因為距離上次安裝的細節太遙遠,而且幾經波折才裝起來,有些設定檔亂亂的不確定對不對,正好最近換了新的 Ubuntu 主機,測試了一下把過程記錄下來。
2013-10-14 16:31:47
hans

1

Solr 教學 (2) – tomcat 7 以帳號密碼限制存取頁面

接續 Solr 教學 (1) – 安
2013-10-14 22:34:34
hans

1

Solr 教學 (1) – 安裝篇

Solr 真是一個不錯的東西,想說架一個來玩,安裝時花了很多時間,網路上大部分查到的都是直接用 jetty 來執行,問了同事之後得知可以把 example 下的 solr.war 檔案直接拉到 tomcat 目錄下,但怎麼試就是沒辦法,這篇
2013-10-14 21:55:32
hans

1

Solr 教學 (3) – 以 Remote Address Filter 限制存取

前面 Solr 教學 (1) – 安
2013-10-14 23:32:54
hans

1

奇怪的 IE Cookie 設定

今天接到一個奇怪的問題單,所有的 Browser 都可以正常執行,唯獨 IE 10 會有問題 (小蛙接到單子之後測試,IE 8 也有問題),花了一些時間找問題到底是什麼,這篇記錄一下,希望能幫到不小心路過的網友!
2013-10-15 20:11:41
hans

1




 回覆

你可以使用以下語法 HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="">

(required)

(required)

   
© 2012 蛙齋 Suffusion theme by Sayontan Sinha