為什麼我無法在 Chrome 64 中從本機檔案存取 CSS 規則？

在Chrome 64 中無法從本地CSS 檔案存取CSS 規則

最近，Web 開發者遇到了一個問題，即在Chrome 64 中無法從本地CSS 文件訪問CSS 規則。 Chrome 版本 64。此問題可歸因於瀏覽器中實施的安全性變更。

問題

過去，Chrome 允許開發人員從本機檔案存取 CSS 規則。但是，在版本 64 中，此功能已受到限制。嘗試存取樣式表的 cssRules 屬性時，開發人員會遇到未定義的回應或錯誤。

<code class="html"><script>
window.onload = function() {
  try {
    alert(document.styleSheets[0]); // works
    alert(document.styleSheets[0].cssRules); // undefined
  } catch (e) {
    alert(e); // error
  }
}
</script>

<link rel="stylesheet" href="myStyle.css">

<!-- myStyle.css -->
body {
  background-color: green;
}</code>

解決方案

為了解決此問題，開發人員已經確定了幾種解決方法：

1. 在線或從本地主機提供檔案：透過在伺服器上託管HTML 和CSS 檔案或使用本機，不會強制執行CORS 策略，並且可以存取CSS 規則。
2. 使用其他瀏覽器：Internet Explorer、Microsoft Edge 和 Firefox 等其他瀏覽器目前不會強制實施相同的 CORS 限制。
3. 命令列選項： Chrome 提供了一個命令列選項 --allow-file-access-from-files ，允許從本機檔案存取 CSS 規則。請謹慎使用此選項。

說明

此問題的根本原因在於 Chrome 安全規則的變更。 Chrome 現在遵守跨來源資源共享 (CORS) 政策，該政策限制對不同來源的資源的存取。由於本機檔案與 HTML 檔案的來源不同，因此從這些檔案存取 CSS 規則違反了 CORS 政策。

未決問題

雖然Chrome 中實施CORS 政策提高了安全性，但也產生了一些未解決的問題：

• 檢測樣式表是否無法從JavaScript 存取的唯一方法是透過try/catch 區塊。
• Chrome 中可能存在實作問題這會破壞某些解決方法。
• CSS 物件模型規格仍處於「工作草案」狀態，為未來的變更留有空間。

以上是為什麼我無法在 Chrome 64 中從本機檔案存取 CSS 規則？的詳細內容。更多資訊請關注PHP中文網其他相關文章！