pCloud Partner Program

[Javascript]實作表單送出後的換頁提醒

程式技術/Javascript 2018/05/23 10:28
views: 58835 times
一般在表單送出後, 若非本頁更新的方式, 而是走 AJAX 方式送出時, 需要一定處理時間等待 server 回應的作業, 若是使用者未能完成執行完成, 而進行更換頁面時, 造成之前表單送出異常或失敗, 此時可以考慮使用這個功能來防止使用者不小心重載(reload), 或是離開頁面. 另一個狀況則是目前表單還未送出時, 但已修改, 如部落格文章編輯時, 已進行修改但未送出, 也是可以使用這個功能來達成.

這個功能是對 window 綁定一個 beforeunload 的事件(其實也就是 addEventListener 或是使用 onbeforeunload 皆可), 不過實測因各家瀏覽器工作方式不同, 無法成功設定自定訊息, 只能由瀏覽器的預設訊息提醒, 在一般狀況使用下, 沒太大問題. 使用方式如下:


其中的訊息請忽略, 因為實際上會出現的訊息與各瀏覽器有關, 但特別要注意的地方是若是已知可以 reload 或送出成功後, 記得要取消, 才不會因為真的成功後, 要重導頁面時, 又出現需要使用者確認的訊息.

以下為在 codepen 的範例:
https://codepen.io/timhuang/pen/YLgvXJ

測試方式為, 先點 bind 後, 成功綁定事件, 再點下方 codepen 連結離開, 此時會出現確認訊息, 來防止或確認離開, unbind 則是在 bind 之後, 再 unbind 就不會觸發這個 beforeunload 確認.

繼續閱讀:
https://sinaad.github.io/xfe/2016/06/29/beforeunlod-vs-unload/
https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload


top

[jQuery]檢查HTML元素是否秀在畫面上

程式技術/Javascript 2018/04/03 17:40
views: 61616 times
一般在操作與檢查瀏覽器畫面上的元件, 是否可以看得到, 使用 css, display 等方法進行檢查, 不過實際上只是檢查是否能在瀏覽器上出現, 但因為瀏覽器只能出現目前可視的區域, 所以實際上元素是否有捲到可以出現的地方是無法透過原本的檢查方法進行檢查, 需要做一些運算.

這個 jQuery plugin: jquery-visible 就是用來檢查這樣的狀況:

https://github.com/customd/jquery-visible/

引用了這個 jQuery Plugin 後, 就能利用 visible() 方法來檢查是否目前的畫面是看得到這個元素. 另外也可以透過 'partial' 參數來檢查是否部分可以看到, 範例程式如:

https://codepen.io/timhuang/pen/rdKbyY

利用 $("#xxx").visible() 檢查是否全部可見或是使用 $("#xxx").visible('partial') 檢查是否部分可見, 十分方便好用.
top

將瀏覽器進入全螢幕的方法(requestFullscreen)

程式技術/Javascript 2016/07/20 17:41
views: 64109 times
有時在一些網站看到可以將特定的內容進行全螢幕的檢視, 早期僅有 video 可以有這樣的功能, 現在也可以透過瀏覽器擴充方法來進行特定內容的全螢幕檢視.

程式碼如下:


其中 launchFullscreen 傳入指定的容器物件, 如 div 就可以利用擴充方法 requestFullscreen 來進行全螢幕檢視, 而 exitFullscreen 則不用傳入物件, 使用 document 的擴充方法 exitFullscreen 即可離開全螢幕檢視.

範例:
http://sample.diary.tw/40/index.htm

參考資料:
http://xuhong.github.io/2014/05/23/fullscreen/
https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/dev-guide/device/fullscreen-api/
top

Mobizen好用Android投影與手機操作管理

好用軟體 2016/01/04 20:37
views: 73689 times
這個 APP 是用來將 Android 手機畫面投到 PC/Mac 上使用的一個應用程式, 而 PC/Mac 只需要瀏覽器就可以操作了, 十分方便, 而且無需 Root.

官方網站: https://www.mobizen.com/

若是使用三星手機請下載: https://play.google.com/store/apps/details?id=com.rsupport.mobizen.sec

若是其他手機請下載: https://play.google.com/store/apps/details?id=com.rsupport.mvagent

開啟 APP 後註冊登入完成後, PC/Mac 端透過流覽器登入後, 即可使用, 除了可以投影出來外, 還可以錄影, 白板(在手機畫面上), 螢幕擷圖等, 也可以管理照片, 通訊錄, 等好用功能.

若有需要將手機投影出來的應用場合, 可以用這個方便好用的工具.

繼續閱讀:
http://www.playpcesor.com/2015/11/mobizen-usb-android-pc-mac.html

[2016/1/5 11:45]
更新一下, 之前常在用的 AirDroid 也已經有[螢幕截圖]這個功能的同步畫面了, 因為之前用都是 Capture 目前的畫面, 現在則是可以同步秀畫面了, 功能上也就和這個 Mobizen 一樣了, 在手機上裝 App, 然後從瀏覽器來看手機的畫面, 只是 AirDroid 的功能更多更方便呢.

網站連結: http://web.airdroid.com/
手機APP: https://play.google.com/store/apps/details?id=com.sand.airdroid
top

測試網站的Responsive效果

手機大未來 2015/06/29 10:46
views: 43587 times
在各式不同載具上都能有效呈現網站, 目前已經是一種很重要的顯學了. 如何快速進行適應介面呈現的測試, 這裡有好用的工具可以實現.

1. http://designmodo.com/responsive-test/
輸入要測試的網站網址後, 選擇右上的各式載具(包含了手機、平板、筆電、桌機等4大類), 就可以輕鬆預覽各種不同螢幕寬度的效果, 快速方便. 右上會顯示出各式設備的寬與高的點數, 也可以藉由旁邊的旋轉圖示來進行模擬旋轉(其實也就是寬變成高, 高變成寬這樣)

2. http://responsivetest.net/
這個網站功能與上面第一個介紹的類似, 不過他會直接把目前測試的內容, 在 url 參數化, 更易於進行分享傳遞, 與溝通使用, 將測試的畫面, 以 url 再轉傳給需要討論的對象, 十分方便.

其他還有像是:
http://responsivedesignchecker.com/
http://ami.responsivedesign.is/ 直接生出4個live預覽圖, 很有意思
http://quirktools.com/screenfly/

等, 也都十分方便好用.
top

好快又升級的Firefox6

好用軟體 2011/08/17 12:27
views: 85718 times
現在 Firefox 拼了命的升級, 奇怪耶, 又沒有多大的功能改善, 主版本號一直往上跳, 這不是個好現象吧. 雖然說這是一個持續在前進的軟體專案, 不過這樣跳躍式的版本號大躍進, 似乎是想證明我們很積極地在改善及進步.

今天的 Firefox 5 提出了要升級到 Firefox 6 的升級通知, 於是就順手升級上來, 不過又是有一些 plugin 不能用了, 看看有沒有它宣稱的速度變快.

用戶插入圖片



top

Firefox5來了

好用軟體 2011/06/22 14:57
views: 106133 times
是的, Firefox 5 來了, 記得沒多久前才 Firefox 4, 而且也就才 4.0.1 而已, Firefox 5 已經於之前更新的 Firefox 4.0.1 上提出新的版本更新提示, 於是又再更新到 Firefox 5, 目前的版本是 5.0

不知道為什麼更新的這麼快, 而且這次更新的主要功能似乎不多, 或許是希望能藉由更新版本數字來活絡一下這個社群持續的求新求快求變的特質吧.

但是這次更新, 有一些 plugin (或稱 extension) 又不能用了, 像是 google 的 toolbar 就是個列子, 不過這些小問題應該很快會獲得解決.

隨著瀏覽器版本的更新, developer 們與 designer 也就必須快速地來適應這個相容性的考驗, 不過也正因為如此, 也讓標準能更標準, 大家能依循著標準來開發及設計, 這樣也是件好事!
top

表單上傳檔案取得檔名問題

程式技術/Javascript 2011/05/18 20:40
views: 111316 times
在前端網頁上, 若要上傳檔案, 是利用一個 <input type=file>的標籤來進行的, 這個 UI 看起來的長像在不同瀏覽器會有不同的結果, 也因為這樣, WEB DESIGNER 常常需要做一些設計來美化及一致化這個長相.

這篇文章不是在討論這個上傳檔案的長相, 而是要探討在前端程式碼取出上傳檔案的名稱, 這個也在不同的瀏覽器有不同的結果, 尤其新的瀏覽器又增加了一些特異功能. (如隱藏路徑)

這樣一來, 若是要對上傳檔案名稱欄位取出做一些判斷的話, 可要注意這些狀況的差異, 這裡寫了個小程式, 取出 <input type=file>的值, 在不同瀏覽器下可以測出不同的結果, 連結在這裡:

http://sample.diary.tw/25

我們以上傳 C:\test\1.txt 為例, 在不同瀏覽器下的結果如下:

IE9:
用戶插入圖片


Firefox 4.01
用戶插入圖片


Google Chrome 5:
用戶插入圖片


Safari 5:
用戶插入圖片


從上面畫面的結果來看, 發現 IE9 及 Google Chrome 會有含路徑的檔名, 但會隱藏路徑, 而 Firefox 4.01及 Safari 5則只會出現檔名而已, 不會有路徑, 而 IE6, IE7, IE8 的狀況則是 IE8 會像 IE9 一樣, 但 IE7, IE6 則是真實的檔案路徑, 如下:

IE6:
用戶插入圖片


IE7:
用戶插入圖片


IE8:
用戶插入圖片


這樣就清楚啦!
top

jQuery Mobile版本

手機大未來 2010/10/07 13:34
views: 365720 times
從阿維筆記本這裡 (http://blog.hsdn.net/1465.html) 看來的, 原來 jQuery 也有 mobile 的版本! 官方網址在這裡: http://jquerymobile.com/

隨著手機的效能愈高, 能支援的網頁複雜度及相容性, 也隨著在手機上的行動瀏覽器而提升, 一般早期在做手機網站大多是單純化, 減少不相的 css 及簡單呈現的方式為主, 不過有了 jQuery for Mobile, 相信又有更多的可能.

這個列表是用來說明目前 jQuery Mobile 支援各型手機 os 及瀏覽器的相容狀況, 共分成了 A, B, C, F 4級, A 為品質最好, B 為次之, C 為較差, 而 F 則是無法相容, 圖片引用自: http://jquerymobile.com/gbs/
用戶插入圖片

看起來相容性最好的是 android 方面的瀏覽器.

有 jQuery for Mobile 對於行動網頁開發者來說, 可以節省不少工夫在實作網頁程式上, 不過行動網頁的要求是更精簡, 更容易地操作, 利用這樣的開發工具, 的確也能減低不少負擔. 來看看 ui 上的狀況: http://jquerymobile.com/designs/

相信對於已經上手 jQuery 的 Developer 們, 這個是一個不錯的好工具!


top

IE9/Safari5/Firefox3/Chrome大車拼

好用軟體 2010/06/10 13:45
views: 136495 times
繼剛寫了Safari5發表的文章後, 想說順便跑一跑其他家的一起來拼一拼.

以下測試 ACID3 是用: http://acid3.acidtests.org/
而 javascript 效率的 Webtest 是用: http://www.101asian.com/webtest.htm

先來看看 IE9 的:
UA: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)(HTTP_USER_AGENT)

ACID3: 68分
用戶插入圖片

WEBTEST: 27ms
用戶插入圖片


再來是 Safari 5的:

more..


top




DJI Tello 小米萬能遙控器 手機App操控
Microsoft Office 365 中文家用版PKC (無光碟) ASUS華碩 AC1900 雙頻無線路由器 RT-AC68U
美國 VORNADO 533 渦流空氣循環機 (黑色) 御茶園 每朝健康綠茶(650mlx24入)
每朝健康 雙纖綠茶(650mlx24入)


 Waiting...