links

最近我發現可以在a標籤中加入download屬性： <a href="file.pdf" download>pdf</a> 這樣瀏覽器就會強制下載連結，即使該檔案可以在瀏覽器中打開（例如PDF檔）。 這個方法只適用於同源的連結。

當你使用純 JavaScript 創建應用程序時，有時你會需要在用戶點擊連結時觸發一個函數。 你通常可以通過以下兩種方式來實現。 假設你要執行的函數叫做 handleClick()： function handleClick() { alert('被點擊了'); } 第一種方式是使用以下連結： <a href="#" onclick="handleClick()">點擊這裡</a> 第二種方式是使用以下連結： <a href="javascript:void(0)" onclick="handleClick()">點擊這裡</a> 這兩種方式的語法非常相似，唯一的區別在於 href 屬性的值。 第一種方式是 href="#"，第二種方式是 href="javascript:void(0)"。 你可能也會看到這種語法 href="javascript:;"，它與第二種方式等價。 那麼，這兩種方式的行為有什麼不同呢？ 當用戶點擊 href="#" 的連結時，你必須確保從事件處理程序中返回 false，否則瀏覽器會自動滾動到頁面頂部： function handleClick() { alert('被點擊了'); return false; } 此外，即使你添加了這個返回語句，但如果 JavaScript 被禁用或由於某些原因無法執行，瀏覽器仍會自動滾動到頁面頂部。這是一件幾乎總是要避免的事情，因此我個人會選擇使用第二種形式 href="javascript:void(0)"。 無論使用哪種方式，如果 JavaScript 被禁用或 JavaScript 中出現錯誤且 JavaScript 執行停止，則不會調用 handleClick() 函數。 為了防止這種情況，你可以在 href 中使用一個真實的 URL 作為後備方案，這樣瀏覽器將使用 GET HTTP 方法將用戶移動到特定頁面，儘管這不總是可能或方便。 但這是一種最佳實踐，而最佳實踐並不總是方便的，但你必須在應用程序設計階段考慮到它們，因為你不能只為理想情況構建應用程序，而忽略一切可能出錯的情況。 如果出了點問題，用戶會責怪你和你的壞連結 🙂