網頁對話視窗 在現代瀏覽環境碰到的問題 [email protected] 

大家都認識的東西 • confirm(); • 再次確認是否執行動作，而不是不小心 點到之後馬上執行。 • 避免有人誤按操作按鈕、誤按鍵盤 Enter、沒看清楚就按，比較完整的近 代網頁系統通常會有其他機制。 • alert(); • 顯示訊息給使用者看 (狀態、警告、提示..) 

alert(); 跟 confirm(); 的好處 • 語法簡單，撰寫方便， • 比起 css 或是一些原生 js 語法，較少相容性問題。 • 由瀏覽器本身的機制處理。 • 對話視窗永遠在視窗焦點的最上層，不用怕被東西蓋住，也不需要捲 動網頁才能看到。 • 鎖定視窗，避免有人偷點後面的東西。 • 作業系統自動配合警告音效。 

Google Chrome Microsoft Edge 缺點1: 視覺樣式不統一(不同瀏覽器) Firefox IE11 「左邊那個驚嘆號可 以換成別的圖案嗎?」 「位置太上面，字 太小，有點不明顯」 「背景不要用黑色的」 「訊息內的某段文字 可以加粗嗎?」 

Chrome on Android 4.x Chrome on Android 5.x 缺點1: 視覺樣式不統一(不同系統) 

Safari (Mac OS Yosemite) Safari (iOS) 缺點1: 視覺樣式不統一 

• 訊息文字不同 • 執行與取消按鈕不同顏色 • 按鈕文字、左右配置不同 • 有圖示 • 執行與取消按鈕樣式相同， 只有一個表示選取狀態的藍框 • 除了確定跟取消，還可以按叉叉 缺點1: 視覺樣式不統一 Safari (Mac OS Yosemite) Chrome (Windows) 

缺點2: 「禁止此網頁產生對話視窗」功能 

勾了之後，將導致對話視窗與確認視窗無法出現 本來可以正常跳出 對話視窗與確認視窗 不小心勾到之後， 就再也看不到對話視窗了。 

本來應該出現「某欄位未填寫」，或「是否確認送出?」的場合… 為什麼無法匯入檔案呢? 為什麼無法刪除商品呢? 點了刪除訂單可是沒反應? 表單填好按送出之後完全沒有反應? 點了沒作用，系統沒有任何回饋訊息 

如何取消「防止此網頁產生其他對話方塊」? 換成不會擋對話視窗的瀏覽器 重新整理就會好 把瀏覽器視窗通通關掉，重開網頁 Chrome for iOS Android Browser ， 或Android 手機廠 商內建的瀏覽器。 

缺點3: 在 Webview 裡面無法顯示對話視窗 以使用 iPad，刪除某網站購物車 內的商品為例: 1.在 safari 中點刪除，會跳 確認視窗，確認後刪除商品。 2.從 Twitter 內開啟網頁，點 刪除毫無反應。 完全不會跳出確認視窗，連 勾錯的機會都沒有。 

• App 開發工具提供的的瀏覽器 API 元件 • 在 App 內點擊 URL ，會使用此元件在 APP 內開啟網頁， 達成無縫體驗，不用常常切換App。 • 但這個瀏覽器又跟一般的瀏覽器有不一樣的行為。 正常瀏覽器 InApp Browser Webview 缺點3: 在 Webview 裡面無法顯示對話視窗 

無法跳出alert()與confirm(); • 好發於 iOS 系統，Android 較少災情。 • 可能隨 APP 更新，發生此症狀，或是此症狀獲得解決。 • 在 APP 裡面可以直接開啟網頁的， 可能都會出問題。 • 社群類 (Facebook, Twitter, plurk…) • 社群軟體的即時通訊功能(Twitter的訊息、FB Messenger…) • 即時通訊類(QQ, Wechat, Line) • 掃條碼類(QR Code…) • 線上書籤、雲端記事類、文章訂閱類… 

應急方法: 放置沒人會看的超長訊息 if (confirm("確定刪除此商品嗎?")){ do something…; }else{ $(".noalert").fadeIn(); } 開發問題叫使用者承擔 長到沒人會看的提示訊息 LOW 程度 : 4 顆星 明明更新瀏覽器了 還會出現提示訊息 LOW 程度 : 5 顆星 

行動開店服務 或連小學生都知道的 知名購物網站 是怎麼解決的? 

根本沒人在用瀏覽器原生的提醒視窗了 淘寶 91買 

根本沒人在用瀏覽器原生的提醒視窗了 淘寶 

或是直接不再跳出任何確認詢問視窗 

其他刪除確認機制 

對話視窗的規格需求 1. 可自訂訊息區塊的字體、大小…樣式 2. 確定與取消按鈕設定不同視覺樣式，減少誤點 3. 對話視窗位置統一顯示 4. 可依不同的訊息類型或功能，放置不同的圖示 5. 可放置圖片、HTML 6. 華而不實的轉場或動畫效果 7. 附加功能: 倒數計時、音效、打勾才能按確定… 8. 相容各大瀏覽器 

使用非原生對話視窗(自製對話視窗)的缺點 1. 使用 CSS 語法，容易被影響導致故障 • 瀏覽器支援性， • 瀏覽器設定 • 還有頁面內的行內樣式影響， 2. 使用 JavaScript 語法撰寫，容易被影響導致故障 • 瀏覽器 JS 功能被阻擋 • 瀏覽器 JS 功能停用 • 程式錯誤 • 瀏覽器中毒造成的 JS error 。 導致跑版、訊息文字顯示不全、 動畫圖示無法正常顯示、 對話視窗在畫面外面、 對話視窗被其他東西蓋住，要捲動才看得到訊息…等情況。 對話視窗出不來，流程無法繼續。 

使用非原生對話視窗(自製對話視窗)的缺點 3. 使用者用瀏覽器的開發者工具把提醒視窗刪掉，繼續進行網頁的操作。 (以淘寶為例) 有時候太久沒驗證，在新增商品，或是管訂單的時候，會叫你先驗證， 但我們可以把對話視窗刪掉，繼續看底下的網頁。 淘寶當然有做其他驗證，不會讓你成功送出變更資料 

使用非原生對話視窗(自製對話視窗)的缺點 4. 功能越多越炫的套件，越不支援舊的瀏覽器，或是在未來可能會出問題。 2007 2015 文字與按鈕重疊 行動裝置不支援 select type=“multiple” 那時候 css 的功能沒這麼多，要做圓角只能用九宮格法、左 右切法、上中下漢堡切法，所以還有許多表單元件美化套件。