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 PMJeffrey | with no comments 3,186
Filed under:
使用 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 PMJeffrey | 1 comment(s) 5,877
Filed under: ,
網頁偵錯鬼問題 - 開了 F12 開發者工具就正常?
分享今天卡到陰,耗掉我半小時青春的鬼問題。 有個待辦事項清單網頁,使用者可點選待辦項目以 Modal Dialog 連上位於其他主機的網頁執行作業,待 Modal Dialog 關閉,待辦清單需依據執行結果決定是否將該筆作業註記為已完成,避免重複處理。由於待辦清單與執行作業網站分處不同伺服器,跨站台情境無法使用 returnValue 傳回結果,故我會靠另設狀態程式從中傳話以克服限制。(細節可參考 TIPS-跨Domain傳遞Modal Dialog結果 ) 情境示意如下: //開啟另一台主機的網頁處理資料...
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 PMJeffrey | 3 comment(s) 5,923
Filed under:
【茶包射手日記】Safari 回上頁時無法停用 Cache
使用者報案,專案網站使用 Safari 檢視,在切換頁面時殘留載入中訊息,但使用 Chrome/IE 則一切正常。 專案網站有個主目錄網頁,點選切換其他功能網頁前會 $.blockUI 顯示"網頁載入中,請稍侯..."訊息,由於頁面很快會被新網頁取代,故沒必要關閉載入中訊息。而網頁有加 <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv...
【茶包射手日記】網頁在某支手機無法使用
同事貢獻新鮮茶包一枚。查到最後發現是低級錯誤,但念在用電話跟 LINE 遠端偵錯耗了三個小時,值得記錄並列為日後問題排除參考。 最初的報案內容是某位使用者剛換了 iPhone 8 新手機,要連上某個例行工作網站查資料,輸入帳號密碼卻無法登入。我們試了自己的手機及平板檢測正常,原以為是使用者個人帳號被鎖或失效導致登入失敗,但檢查帳號狀態正常, 歷經一陣 雞 同鴨講 追問細節後才搞清楚,其實登入有成功,而是畫面不正常且無法操作。(跟報案內容大不相同,隔空抓藥好刺激呀) 為對照比較,商請使用者借其他人的手機測試結果正常...
JavaScript 中文排序問題
今天才發現 JavaScript 中文字串排序有個大問題! 下圖是 KendoGrid 在 Chrome 使用 JavaScript 排序的結果,如圖所示,一到七由小到大排序結果為一、七、三、二、五、六、四,既不是依筆劃,也不是依注音: (SQL 的中文定序就區分筆劃跟注音,例如: Chinese_Taiwan_Stroke_CI_AS vs Chinese_Taiwan_Bopomofo_CI_AS 參考 ) 爬文後得知這是 JavaScript 中文字串排序的己知問題(我 Lag 真大),字串型別有個...
JavaScript 開發者 ES6 小抄筆記
在網路上看到這篇 - Modern JavaScript Cheatsheet - Modern JS Cheatsheet ,給既有 JavaScript 開發者看的小抄,指出因應 ES6/ES2015 新標準的注意事項。(註:如果你被 ECMAScript 6、ES6、ES2015 等術語搞到頭很昏,可以參考 這篇 ) 而這篇則是我以一個 jQuery/TypeScript/C# 開發者角度閱讀小抄的筆記整理,主要供自己備忘(謎: 天哪,這年頭連看小抄都要做筆記了嗎?),順便分享給類似背景的同學參考...
【茶包射手日記】網頁 Enter 鍵誤擊刪除鈕疑雲
同事報案,在「以 MVVM 清單實作資料編輯介面」的經典應用場景( Knockout版範例 、 Angular版範例 )遇見怪事。新増一筆資料後,將焦點移至 <input type="text"> 輸入欄位,若按下 Enter 資料會莫名消失,按一次消失一筆… 程式用了 jQuery、Bootstrape、Knockout、KendoUI,加上一堆自訂程式庫,無法斷定是誰造成,只好抽絲剝繭,以能重現問題為原則,將掛載的程式庫及 DOM 元素一一拆除。歷經一番功夫,最後竟發現是個...
實例分析-彈出式視窗被瀏覽器封鎖
昨天剛在公司解完案例,今天又在日常生活遇到實例,老天爺這暗示明顯無比,趕緊來篇筆記,以防出門雷劈! 最近迷上蝦皮拍賣。能跟 LINE 一樣跟賣家溝通超方便,尤其問完問題馬上接到賣家的實體照片真令人感動,不用出門與人面對面又保有臨櫃交談的即時性,真是阿宅的救星。遇到一個賣家很妙,凌晨四點多發訊息通知我補寄商品今天會到(不知對方有沒有早起的拎杯秒回「謝謝」嚇到? XD)。 在中華郵政網站輸入包裹號碼,按下「運輸資料」查詢鈕… 登楞! JavaScript 試圖彈出視窗被 Chrome 瀏覽器封鎖了!...
Posted 16 June 2017 11:01 AMJeffrey | with no comments 9,275
Filed under: ,
onbeforeunload 事件不再支援自訂訊息
要防止使用者網頁輸入資料時誤按超連結或回上頁鍵,來不及儲存(送出)就離開,有個古老技巧是攔截 onbeforeunload 事件,使用 return "…" 傳回提醒文字,讓使用者有機會反悔,選擇停留在原頁面。(參考: 如何避免使用者在特定網頁表單在未經送出時意外離開 ) 這招用了多年,今天在寫某個設定網頁時卻發現 Chrome 沒有顯示我在 onbeforeunload 傳回的提醒文字,而是出現「系統可能不會儲存你所做的變更」字樣。 原以為是寫法有誤不符 Chrome 要求...
Posted 04 January 2017 10:49 PMJeffrey | with no comments 8,005
Filed under:
小試 JavaScript Promise
非同步邏輯是寫 JavaScript 逃不掉的複雜課題,古早流行的做法是傳入 Callback 函式當參數,待特定作業完成再呼叫,缺點是串接程序一旦變多,就會出現波動拳式排版,寫到渾然不知身處夢境第幾層: asyncJob1( function () { //Callback 函式: asyncJob1 完成後呼叫 //...... ayncJob2( function () { //Callback 函式: asyncJob2 完成後呼叫 //...... ayncJob3( function...
【笨問題】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 PMJeffrey | 3 comment(s) 7,472
Filed under:
在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 PMJeffrey | with no comments 12,030
Filed under: ,
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 AMJeffrey | 1 comment(s) 5,100
Filed under: ,
更多文章 下一頁 »

搜尋

Go

<December 2018>
SunMonTueWedThuFriSat
2526272829301
2345678
9101112131415
16171819202122
23242526272829
303112345
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication