Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

jiimmysu
January 02, 2016

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

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

jiimmysu

January 02, 2016
Tweet

More Decks by jiimmysu

Other Decks in Technology

Transcript

  1. alert(); 跟 confirm(); 的好處 • 語法簡單,撰寫方便, • 比起 css 或是一些原生

    js 語法,較少相容性問題。 • 由瀏覽器本身的機制處理。 • 對話視窗永遠在視窗焦點的最上層,不用怕被東西蓋住,也不需要捲 動網頁才能看到。 • 鎖定視窗,避免有人偷點後面的東西。 • 作業系統自動配合警告音效。
  2. Google Chrome Microsoft Edge 缺點1: 視覺樣式不統一(不同瀏覽器) Firefox IE11 「左邊那個驚嘆號可 以換成別的圖案嗎?」

    「位置太上面,字 太小,有點不明顯」 「背景不要用黑色的」 「訊息內的某段文字 可以加粗嗎?」
  3. • 訊息文字不同 • 執行與取消按鈕不同顏色 • 按鈕文字、左右配置不同 • 有圖示 • 執行與取消按鈕樣式相同,

    只有一個表示選取狀態的藍框 • 除了確定跟取消,還可以按叉叉 缺點1: 視覺樣式不統一 Safari (Mac OS Yosemite) Chrome (Windows)
  4. 缺點3: 在 Webview 裡面無法顯示對話視窗 以使用 iPad,刪除某網站購物車 內的商品為例: 1.在 safari 中點刪除,會跳

    確認視窗,確認後刪除商品。 2.從 Twitter 內開啟網頁,點 刪除毫無反應。 完全不會跳出確認視窗,連 勾錯的機會都沒有。
  5. • App 開發工具提供的的瀏覽器 API 元件 • 在 App 內點擊 URL

    ,會使用此元件在 APP 內開啟網頁, 達成無縫體驗,不用常常切換App。 • 但這個瀏覽器又跟一般的瀏覽器有不一樣的行為。 正常瀏覽器 InApp Browser Webview 缺點3: 在 Webview 裡面無法顯示對話視窗
  6. 無法跳出alert()與confirm(); • 好發於 iOS 系統,Android 較少災情。 • 可能隨 APP 更新,發生此症狀,或是此症狀獲得解決。

    • 在 APP 裡面可以直接開啟網頁的, 可能都會出問題。 • 社群類 (Facebook, Twitter, plurk…) • 社群軟體的即時通訊功能(Twitter的訊息、FB Messenger…) • 即時通訊類(QQ, Wechat, Line) • 掃條碼類(QR Code…) • 線上書籤、雲端記事類、文章訂閱類…
  7. 應急方法: 放置沒人會看的超長訊息 if (confirm("確定刪除此商品嗎?")){ do something…; }else{ $(".noalert").fadeIn(); } 開發問題叫使用者承擔

    長到沒人會看的提示訊息 LOW 程度 : 4 顆星 明明更新瀏覽器了 還會出現提示訊息 LOW 程度 : 5 顆星
  8. 使用非原生對話視窗(自製對話視窗)的缺點 1. 使用 CSS 語法,容易被影響導致故障 • 瀏覽器支援性, • 瀏覽器設定 •

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