網頁對話視窗在現代網頁環境碰到的問題

alert(); 跟 confirm(); 的好處
缺點1: 視覺樣式不統一
缺點2: 「禁止此網頁產生對話視窗」功能
缺點3: 在 Webview 裡面無法顯示對話視窗
行動開店服務或連小學生都知道的知名購物網站是怎麼解決的?
對話視窗的規格需求
非原生對話視窗的缺點

Transcript

1. 網頁對話視窗 在現代瀏覽環境碰到的問題 su1205su@gmail.com
2. 大家都認識的東西 • confirm(); • 再次確認是否執行動作，而不是不小心 點到之後馬上執行。 • 避免有人誤按操作按鈕、誤按鍵盤 Enter、沒看清楚就按，比較完整的近 代網頁系統通常會有其他機制。 • alert(); • 顯示訊息給使用者看 (狀態、警告、提示..)
3. alert(); 跟 confirm(); 的好處 • 語法簡單，撰寫方便， • 比起 css 或是一些原生 js 語法，較少相容性問題。 • 由瀏覽器本身的機制處理。 • 對話視窗永遠在視窗焦點的最上層，不用怕被東西蓋住，也不需要捲 動網頁才能看到。 • 鎖定視窗，避免有人偷點後面的東西。 • 作業系統自動配合警告音效。
4. Google Chrome Microsoft Edge 缺點1: 視覺樣式不統一(不同瀏覽器) Firefox IE11 「左邊那個驚嘆號可 以換成別的圖案嗎?」 「位置太上面，字 太小，有點不明顯」 「背景不要用黑色的」 「訊息內的某段文字 可以加粗嗎?」
5. Chrome on Android 4.x Chrome on Android 5.x 缺點1: 視覺樣式不統一(不同系統)
6. Safari (Mac OS Yosemite) Safari (iOS) 缺點1: 視覺樣式不統一
7. • 訊息文字不同 • 執行與取消按鈕不同顏色 • 按鈕文字、左右配置不同 • 有圖示 • 執行與取消按鈕樣式相同， 只有一個表示選取狀態的藍框 • 除了確定跟取消，還可以按叉叉 缺點1: 視覺樣式不統一 Safari (Mac OS Yosemite) Chrome (Windows)
8. 缺點2: 「禁止此網頁產生對話視窗」功能
9. 勾了之後，將導致對話視窗與確認視窗無法出現 本來可以正常跳出 對話視窗與確認視窗 不小心勾到之後， 就再也看不到對話視窗了。
10. 本來應該出現「某欄位未填寫」，或「是否確認送出?」的場合… 為什麼無法匯入檔案呢? 為什麼無法刪除商品呢? 點了刪除訂單可是沒反應? 表單填好按送出之後完全沒有反應? 點了沒作用，系統沒有任何回饋訊息
11. 如何取消「防止此網頁產生其他對話方塊」? 換成不會擋對話視窗的瀏覽器 重新整理就會好 把瀏覽器視窗通通關掉，重開網頁 Chrome for iOS Android Browser ， 或Android 手機廠 商內建的瀏覽器。
12. 缺點3: 在 Webview 裡面無法顯示對話視窗 以使用 iPad，刪除某網站購物車 內的商品為例: 1.在 safari 中點刪除，會跳 確認視窗，確認後刪除商品。 2.從 Twitter 內開啟網頁，點 刪除毫無反應。 完全不會跳出確認視窗，連 勾錯的機會都沒有。
13. • App 開發工具提供的的瀏覽器 API 元件 • 在 App 內點擊 URL ，會使用此元件在 APP 內開啟網頁， 達成無縫體驗，不用常常切換App。 • 但這個瀏覽器又跟一般的瀏覽器有不一樣的行為。 正常瀏覽器 InApp Browser Webview 缺點3: 在 Webview 裡面無法顯示對話視窗
14. 無法跳出alert()與confirm(); • 好發於 iOS 系統，Android 較少災情。 • 可能隨 APP 更新，發生此症狀，或是此症狀獲得解決。 • 在 APP 裡面可以直接開啟網頁的， 可能都會出問題。 • 社群類 (Facebook, Twitter, plurk…) • 社群軟體的即時通訊功能(Twitter的訊息、FB Messenger…) • 即時通訊類(QQ, Wechat, Line) • 掃條碼類(QR Code…) • 線上書籤、雲端記事類、文章訂閱類…
15. 應急方法: 放置沒人會看的超長訊息 if (confirm("確定刪除此商品嗎?")){ do something…; }else{ $(".noalert").fadeIn(); } 開發問題叫使用者承擔 長到沒人會看的提示訊息 LOW 程度 : 4 顆星 明明更新瀏覽器了 還會出現提示訊息 LOW 程度 : 5 顆星
16. 行動開店服務 或連小學生都知道的 知名購物網站 是怎麼解決的?
17. 根本沒人在用瀏覽器原生的提醒視窗了 淘寶 91買
18. 根本沒人在用瀏覽器原生的提醒視窗了 淘寶
19. 或是直接不再跳出任何確認詢問視窗
20. 其他刪除確認機制
21. 對話視窗的規格需求 1. 可自訂訊息區塊的字體、大小…樣式 2. 確定與取消按鈕設定不同視覺樣式，減少誤點 3. 對話視窗位置統一顯示 4. 可依不同的訊息類型或功能，放置不同的圖示 5. 可放置圖片、HTML 6. 華而不實的轉場或動畫效果 7. 附加功能: 倒數計時、音效、打勾才能按確定… 8. 相容各大瀏覽器
22. 使用非原生對話視窗(自製對話視窗)的缺點 1. 使用 CSS 語法，容易被影響導致故障 • 瀏覽器支援性， • 瀏覽器設定 • 還有頁面內的行內樣式影響， 2. 使用 JavaScript 語法撰寫，容易被影響導致故障 • 瀏覽器 JS 功能被阻擋 • 瀏覽器 JS 功能停用 • 程式錯誤 • 瀏覽器中毒造成的 JS error 。 導致跑版、訊息文字顯示不全、 動畫圖示無法正常顯示、 對話視窗在畫面外面、 對話視窗被其他東西蓋住，要捲動才看得到訊息…等情況。 對話視窗出不來，流程無法繼續。
23. 使用非原生對話視窗(自製對話視窗)的缺點 3. 使用者用瀏覽器的開發者工具把提醒視窗刪掉，繼續進行網頁的操作。 (以淘寶為例) 有時候太久沒驗證，在新增商品，或是管訂單的時候，會叫你先驗證， 但我們可以把對話視窗刪掉，繼續看底下的網頁。 淘寶當然有做其他驗證，不會讓你成功送出變更資料
24. 使用非原生對話視窗(自製對話視窗)的缺點 4. 功能越多越炫的套件，越不支援舊的瀏覽器，或是在未來可能會出問題。 2007 2015 文字與按鈕重疊 行動裝置不支援 select type=“multiple” 那時候 css 的功能沒這麼多，要做圓角只能用九宮格法、左 右切法、上中下漢堡切法，所以還有許多表單元件美化套件。