Browse by Tags

小技巧 - 運用 Form target 模擬 AJAX 表單傳送效果

先定義我所謂的「AJAX 表單傳送」：意指撰寫 JavaScript 蒐集 HTML 表單欄位，再藉由 XHR 傳送到伺服器端，取代傳統的 Postback。其優點包含送單時畫面不閃動、沒有重新載入網頁的延遲以及傳輸運算成本、表單處理失敗使用者輸入狀態不變方便修改重送... 等等，近年來 AJAX 表單已成網頁操作設計主流。相較之下，傳統 Postback 方式(指用<form action="…">配合<input type="submit">或<button>按鈕送單的做法...

Posted 13 August 2018 10:06 PM 由 Jeffrey | with no comments 3,536

Filed under: Javascript

使用 Headless Chrome 擷圖、轉存PDF、爬資料

Chrome 自 59 版起內建了 Headless 模式 ，允許透過命令列啟動 Chrome 以無 GUI 方式執行，具備與正常開啟完全相同的網頁渲染及 JavaScript 引擎，還可透過網路連線遙控。這個功能可以用於不少有趣應用，這裡列舉幾種實用情境。 註：Headless Chrome 的完整參數可參考 List of Chromium Command Line Switches « Peter Beverloo 網頁擷圖 將網頁存成圖檔或 PDF，過去我是用 PhantomJs 。Headless...

Posted 10 July 2018 11:24 PM 由 Jeffrey | 1 comment(s) 6,594

Filed under: Javascript, HTML5

網頁偵錯鬼問題 - 開了 F12 開發者工具就正常？

分享今天卡到陰，耗掉我半小時青春的鬼問題。 有個待辦事項清單網頁，使用者可點選待辦項目以 Modal Dialog 連上位於其他主機的網頁執行作業，待 Modal Dialog 關閉，待辦清單需依據執行結果決定是否將該筆作業註記為已完成，避免重複處理。由於待辦清單與執行作業網站分處不同伺服器，跨站台情境無法使用 returnValue 傳回結果，故我會靠另設狀態程式從中傳話以克服限制。(細節可參考 TIPS-跨Domain傳遞Modal Dialog結果 ） 情境示意如下： //開啟另一台主機的網頁處理資料...

Posted 02 April 2018 10:37 PM 由 Jeffrey | 2 comment(s) 7,776

Filed under: Javascript, Trouble-Shooting

JavaScript 將輸入欄位內容複製到剪貼簿

部落格原本用的程式碼顏色標示(Syntax Highlight)套件是十年前的產物，早就跟不上程式語言演進腳步， 上篇文章 起網站悄悄改版，改用支援 176 種語法及 76 種樣式並持續更新的 highlight.js 。(列入評估的另一選項 prism.js 也很出色，頗難抉擇，最後選定 Github 觀注度較高 的 highlight.js。延伸閱讀： Top 5 : Best code syntax highlighter javascript plugins | Our Code World...

Posted 15 March 2018 11:33 PM 由 Jeffrey | 3 comment(s) 6,442

Filed under: Javascript

【茶包射手日記】Safari 回上頁時無法停用 Cache

使用者報案，專案網站使用 Safari 檢視，在切換頁面時殘留載入中訊息，但使用 Chrome/IE 則一切正常。 專案網站有個主目錄網頁，點選切換其他功能網頁前會 $.blockUI 顯示"網頁載入中，請稍侯..."訊息，由於頁面很快會被新網頁取代，故沒必要關閉載入中訊息。而網頁有加 <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv...

Posted 20 January 2018 08:33 AM 由 Jeffrey | 1 comment(s) 3,726

Filed under: Javascript, Trouble-Shooting

【茶包射手日記】網頁在某支手機無法使用

同事貢獻新鮮茶包一枚。查到最後發現是低級錯誤，但念在用電話跟 LINE 遠端偵錯耗了三個小時，值得記錄並列為日後問題排除參考。 最初的報案內容是某位使用者剛換了 iPhone 8 新手機，要連上某個例行工作網站查資料，輸入帳號密碼卻無法登入。我們試了自己的手機及平板檢測正常，原以為是使用者個人帳號被鎖或失效導致登入失敗，但檢查帳號狀態正常， 歷經一陣 雞 同鴨講 追問細節後才搞清楚，其實登入有成功，而是畫面不正常且無法操作。(跟報案內容大不相同，隔空抓藥好刺激呀) 為對照比較，商請使用者借其他人的手機測試結果正常...

Posted 29 November 2017 08:39 PM 由 Jeffrey | 1 comment(s) 6,270

Filed under: Javascript, Trouble-Shooting

JavaScript 中文排序問題

今天才發現 JavaScript 中文字串排序有個大問題! 下圖是 KendoGrid 在 Chrome 使用 JavaScript 排序的結果，如圖所示，一到七由小到大排序結果為一、七、三、二、五、六、四，既不是依筆劃，也不是依注音: (SQL 的中文定序就區分筆劃跟注音，例如: Chinese_Taiwan_Stroke_CI_AS vs Chinese_Taiwan_Bopomofo_CI_AS 參考 ) 爬文後得知這是 JavaScript 中文字串排序的己知問題(我 Lag 真大)，字串型別有個...

Posted 19 October 2017 11:03 PM 由 Jeffrey | 4 comment(s) 7,624

Filed under: 中文編碼, Javascript

JavaScript 開發者 ES6 小抄筆記

在網路上看到這篇 - Modern JavaScript Cheatsheet - Modern JS Cheatsheet ，給既有 JavaScript 開發者看的小抄，指出因應 ES6/ES2015 新標準的注意事項。（註：如果你被 ECMAScript 6、ES6、ES2015 等術語搞到頭很昏，可以參考 這篇 ） 而這篇則是我以一個 jQuery/TypeScript/C# 開發者角度閱讀小抄的筆記整理，主要供自己備忘(謎: 天哪，這年頭連看小抄都要做筆記了嗎?)，順便分享給類似背景的同學參考...

Posted 03 October 2017 08:07 AM 由 Jeffrey | 4 comment(s) 9,276

Filed under: Javascript, TypeScript

【茶包射手日記】網頁 Enter 鍵誤擊刪除鈕疑雲

同事報案，在「以 MVVM 清單實作資料編輯介面」的經典應用場景（ Knockout版範例 、 Angular版範例 ）遇見怪事。新増一筆資料後，將焦點移至 <input type="text"> 輸入欄位，若按下 Enter 資料會莫名消失，按一次消失一筆… 程式用了 jQuery、Bootstrape、Knockout、KendoUI，加上一堆自訂程式庫，無法斷定是誰造成，只好抽絲剝繭，以能重現問題為原則，將掛載的程式庫及 DOM 元素一一拆除。歷經一番功夫，最後竟發現是個...

Posted 28 June 2017 11:46 PM 由 Jeffrey | 3 comment(s) 8,973

Filed under: Javascript, Trouble-Shooting

實例分析－彈出式視窗被瀏覽器封鎖

昨天剛在公司解完案例，今天又在日常生活遇到實例，老天爺這暗示明顯無比，趕緊來篇筆記，以防出門雷劈！ 最近迷上蝦皮拍賣。能跟 LINE 一樣跟賣家溝通超方便，尤其問完問題馬上接到賣家的實體照片真令人感動，不用出門與人面對面又保有臨櫃交談的即時性，真是阿宅的救星。遇到一個賣家很妙，凌晨四點多發訊息通知我補寄商品今天會到（不知對方有沒有早起的拎杯秒回「謝謝」嚇到？ XD）。 在中華郵政網站輸入包裹號碼，按下「運輸資料」查詢鈕… 登楞！ JavaScript 試圖彈出視窗被 Chrome 瀏覽器封鎖了！...

Posted 16 June 2017 11:01 AM 由 Jeffrey | with no comments 9,794

Filed under: Javascript, AJAX

onbeforeunload 事件不再支援自訂訊息

要防止使用者網頁輸入資料時誤按超連結或回上頁鍵，來不及儲存（送出）就離開，有個古老技巧是攔截 onbeforeunload 事件，使用 return "…" 傳回提醒文字，讓使用者有機會反悔，選擇停留在原頁面。（參考： 如何避免使用者在特定網頁表單在未經送出時意外離開 ） 這招用了多年，今天在寫某個設定網頁時卻發現 Chrome 沒有顯示我在 onbeforeunload 傳回的提醒文字，而是出現「系統可能不會儲存你所做的變更」字樣。 原以為是寫法有誤不符 Chrome 要求...

Posted 04 January 2017 10:49 PM 由 Jeffrey | with no comments 8,244

Filed under: Javascript

小試 JavaScript Promise

非同步邏輯是寫 JavaScript 逃不掉的複雜課題，古早流行的做法是傳入 Callback 函式當參數，待特定作業完成再呼叫，缺點是串接程序一旦變多，就會出現波動拳式排版，寫到渾然不知身處夢境第幾層： asyncJob1( function () { //Callback 函式： asyncJob1 完成後呼叫 //...... ayncJob2( function () { //Callback 函式： asyncJob2 完成後呼叫 //...... ayncJob3( function...

Posted 22 December 2016 10:34 PM 由 Jeffrey | 1 comment(s) 10,237

Filed under: Javascript, jQuery, TypeScript

【笨問題】JavaScript取字串split()結果最後一段

困擾我很久的一個問題：寫程式時常遇到用Split切字串再取最後一節的情境，例如：「DomainName\Account」取Account、「Oracle.ManagedDataAccess.Client.OracleConnection」取OracleConnection。 這類需求用C#寫，當然二話不說，Split()加LINQ .Last()一行搞定: "Domain\\Account" .Split( '\\' ).Last() 但同樣一件事搬到JavaScript我就發傻了...

Posted 10 July 2016 07:50 PM 由 Jeffrey | 3 comment(s) 7,759

Filed under: Javascript

在JavaScript模擬C# Dictionary、LINQ Where、Select與OrderBy

一週內被兩位同事問到幾乎相同的問題，這一定是天意！趕緊寫篇FAQ以免天公伯不開心～ 【問題】 用JavaScript要怎麼實現Dictionary<string, T>？ JavaScript有沒有類似LINQ Where()、Select()、OrderBy()的東西？ 回答第一個問題，JavaScript物件本身就具備Dictionary<string, T>的特性，範例如下： <! DOCTYPE html > < html > < head...

Posted 03 July 2016 12:40 PM 由 Jeffrey | with no comments 12,251

Filed under: Javascript, jQuery

Hash對講機－IFrame跨站台網頁通訊程式庫

這是最近 跟老IE纏鬥 衍生的副產品。 雖然已研究出 用document.domain克服無法與IFrame跨站台網頁溝通問題 ，但實務上常不免會遇到使用IP、機器名稱或別名連上網站的場合，document.domain法只適用URL採FQDN完整網域名稱且後段網域相同的情境，實用性大減。 針對IFrame跨站台溝通， 浏览器同源政策及其规避方法 一文提到三種解法： window.name 跨文件傳輸API（Cross-Document Messaging） 片段識別碼（Fragment Identifier...

Posted 18 June 2016 11:49 AM 由 Jeffrey | 1 comment(s) 5,389

Filed under: Javascript, IE

搜尋