Chrome 64 版新功能

Pete LePage

還有更多！

我是 Pete LePage一起來深入探索 Chrome 64 為開發人員推出的新功能！

需要完整的異動清單嗎？請查看 Chromium 原始碼存放區變更清單。

ResizeObserver

追蹤元素的大小變更時，並非易事。您可能會在文件的 resize 事件中附加事件監聽器，然後呼叫 getBoundingClientRect 或 getComputedStyle。但這兩種方法都可能導致版面配置出現輾轉現象。

如果瀏覽器視窗大小沒有變更，但文件中新增了元素，該怎麼辦？或者您在元素中新增了 display: none？這兩種元素都能變更頁面中其他元素的大小。

只要元素大小變更，ResizeObserver 就會通知您，並提供元素新的高度和寬度，降低版面配置遭到破壞的風險。

如同其他觀察器，使用方式相當簡單，只要建立 ResizeObserver 物件，並將回呼傳遞至建構函式即可。回呼會收到 ResizeOberverEntries 陣列，每個觀察到的元素都有一個項目，其中包含元素的新維度。

const ro = new ResizeObserver( entries => {
  for (const entry of entries) {
    const cr = entry.contentRect;
    console.log('Element:', entry.target);
    console.log(`Element size: ${cr.width}px × ${cr.height}px`);
    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
  }
});

// Observe one or multiple elements
ro.observe(someElement);

如需更多詳細資料和實際範例，請參閱 ResizeObserver：與 document.onresize 一樣。

我討厭靠背包。您知道這類彈出式視窗嗎？這類視窗會在網頁開啟某個目的地彈出式視窗，並導覽至該網頁。其中一個通常是廣告或您不想看到的內容。

自 Chrome 64 起，這類導覽將遭到封鎖，Chrome 會向使用者顯示一些原生 UI，讓他們可以自行選擇是否要重新導向。

import.meta

編寫 JavaScript 模組時，您通常需要存取目前模組的相關主機專屬中繼資料。Chrome 64 現已支援模組中的 import.meta 屬性，並將模組的網址公開為 import.meta.url。

當您想針對模組檔案 (而非目前的 HTML 文件) 解析資源時，這項功能就非常實用。

還有更多獎品等著您！

這些只是 Chrome 64 針對開發人員所做的部分異動，當然還有更多變更。

  • Chrome 現在支援規則運算式中的命名擷取和 Unicode 屬性轉義。
  • <audio> 和 <video> 元素的預設 preload 值現在為 metadata。這可讓 Chrome 與其他瀏覽器保持一致，並且只載入中繼資料，而非媒體本身，有助於減少頻寬和資源使用量。
  • 您現在可以使用 Request.prototype.cache 查看 Request 的快取模式，並判斷要求是否為重新載入要求。
  • 使用 Focus Management API 時，您可以利用 preventScroll 屬性聚焦特定元素，而不必捲動至該元素。

window.alert()

對了，還有一件事！這並不是「開發人員功能」，但我很開心。window.alert() 不再將背景分頁移至前景！而是會在使用者切換回該分頁時顯示快訊。

不再因為某些東西觸發 window.alert 而隨機切換分頁。我正在查看你的舊版 Google 日曆。

請務必訂閱我們的 YouTube 頻道，這樣一來，我們發布新影片時，你就會收到電子郵件通知。

我是 Pete LePage，Chrome 65 一推出，我就會馬上在這裡告訴你 Chrome 的新功能！