[料理佳餚] 使用 window.history 來實作儲存及還原瀏覽器的捲軸位置

網頁瀏覽器都有一個功能,它會幫我們記住目前頁面的捲軸位置,在我們重新整理或是回到上一頁、前往下一頁之後,捲軸會還原到原本的位置,可是如果我們的網頁 HTML 元件是在前端產生的,因為畫面上 HTML 元件的渲染時機不定,那麼瀏覽器在還原捲軸位置的時候,就會有不穩定的情況,不是無效不然就是位置不對,這個問題我們透過 window.history 就能輕鬆解決,我們來看一下怎麼做?

...繼續閱讀 »

[廚餘回收] 重複載入 jQuery 會有什麼問題?如何避開?

如果我們用 jQuery 在開發網頁,那麼 jQuery 應該也一定只載入一次,偏偏就有第三方合作廠商,完全沒有在管客戶是不是會出問題?檢查也不做,愛載就載,例如:6763 的站內付 2.0,用他們的 Web JS SDK 初始付款頁面的時候強制載入了 jQuery 3.4.1,如果我們的網頁本身就已經載入 jQuery 了,就會導致重複載入,那會發生什麼事?

...繼續閱讀 »

[小菜一碟] 在前端使用 JavaScript 操作 Canvas 來合併/縮放/裁切圖片

在我剛學習網頁程式設計的那個年代,要在前端網頁上對圖片做除了顯示/隱藏/放大/縮小以外的處理,大都是丟到後端處理完後再丟回來,拜網頁設計技術進步所賜,生出了 Canvas 這個東西,讓我們可以利用客戶端的運算資源執行繪圖的工作,甚至要搞出一個純前端的小畫家是完全沒有問題的。

...繼續閱讀 »

[小菜一碟] 在 JavaScript 如何讓註冊給事件(Event)的方法只被觸發一次?

這篇文章是一個知識的分享,主要分享給不知道的朋友,我們用 JavaScript 設計一個互動的網頁,一定會用到事件(Event),舉凡像是按鈕的點擊、滑鼠的捲動、選項值的改變、...等等,這些都會需要事件來輔助,但是有時候我們會希望註冊給事件的方法只被觸發一次。

...繼續閱讀 »

[食譜好菜] CefSharp 在 JavaScript 與 .NET 之間互相呼叫方法並且傳遞參數及回傳值

上一篇文章我們簡單介紹了一下 CefSharp 的基本使用方式,直接在 WinForms/WPF 內嵌一個瀏覽器,基本上我們所有的程式邏輯都可以引入 JavaScript 套件,用 JavaScript 來開發,直接在瀏覽器端執行,但是這不代表我們不能把工作丟給 .NET 來做,必要時我們還是可以搭配 .NET 來平衡一下應用程式的工作負載,因此在 JavaScript 與 .NET 之間傳遞參數及回傳值就很重要了,這篇文章我們就來探究一下使用 CefSharp 套件,如何在 JavaScript 與 .NET 之間傳遞參數及回傳值?以及能夠傳遞的參數及回傳值的類型有哪些?

...繼續閱讀 »

[小菜一碟] 搞懂 Day.js Timezone 外掛套件的使用方式

Day.js 是在前端的世界中,一個處理日期時間相當知名的套件,或許有朋友聽過 Moment.js,但是可以用 Day.js 的話我優先選擇使用 Day.js,最主要是它的檔案大小號稱只有 2KB,之所以可以壓到這麼小,最重要的一個原因是它將一些額外的功能,以外掛的方式分包出去,要使用的話再引用進來,而 Timezone 是其中一個外掛。

...繼續閱讀 »

[小菜一碟] 在前端用 JavaScript 搭配 pako 套件實現壓縮及解壓縮

最近專案有一個需求,需求當中的一個小部分是要在網頁上將使用者輸入的內容壓縮起來存檔,之後使用者再開啟這個檔案解壓縮顯示壓縮前的內容在網頁上,仔細想想現在的硬碟空間都那麼大,好像沒有什麼壓縮的必要,但是使用者覺得有必要,那也只好做給他了。

...繼續閱讀 »

[小菜一碟] 利用 window.navigator.sendBeacon() 在使用者關閉網頁視窗時發送記錄

我們在追蹤客戶端行為時,多多少少會遇到一個場景,就是要在使用者把網頁視窗關閉時,將記錄送回伺服器端,做法上我們可能會想在網頁視窗觸發 unload 事件的時候,發送 AJAX Request 回伺服器端就好了,但是這個方法在一些瀏覽器上(比如:Firefox)不 Work,取而代之 Web APIs 提供了更好的 API - sendBeacon()

...繼續閱讀 »

[創意菜色] 如何利用 Google Docs 的語音輸入製作視訊會議的逐字稿?

要不是最近開了大量的視訊會議,不然我應該沒啥機會去研究這篇文章的主題,有一天我發現 Google Docs 有一個「語音輸入」的功能,加上以前我有嘗試著把音樂直接轉成輸入的音源,透過網路播放出去,原則上應該可以把視訊會議上講話的內容,丟給 Google Docs 讓它輸出成文字,我們就來看看行不行得通?

...繼續閱讀 »