如何載入檔案資源 (HTML)
[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App,請參閱 最新文件 ]
了解如何從各個位置載入檔案資源。
您可以存取應用程式檔案中的檔案資源,應用程式檔案可以是隨應用程式套件傳送、隨附於元件或架構套件,或來自應用程式資料或網路的檔案。您可以在標記 (例如 HTML 或通知 XML) 或透過程式碼 (例如 Windows.Web.Http 或 storage file) 參照這些檔案。這裡的範例顯示特定內容中的檔案資源,但您可以在其他各種內容中使用大多數的檔案資源。
網路
若要從網路存取檔案,您可以使用標準的絕對 HTTP URI。
<img src="https://www.contoso.com/images/logo.png" alt="Logo" />
應用程式套件
若要從應用程式套件存取檔案,您可以使用直接或邏輯檔案路徑參照資源。即使這些檔案的檔案名稱中以多種語言、縮放比例、對比或其他變數做為限定詞,都是如此。請參閱快速入門:使用檔案或影像資源,了解相關介紹。
例如,您要載入
Images/en-US/homeregion-USA/logo.scale-100_contrast-white.png
方法是參考
Images/logo.png
若要存取相對於標記中之目前文件的檔案,您可以使用相對 URI。
<img src="images/logo.png" />
若要存取相對於套件根目錄的檔案,您可以使用絕對路徑 URI (開頭為 "/")。
<img src="/images/logo.png" />
若要存取儲存在相同套件內但是來自於類別程式庫的檔案,可以使用類別程式庫名稱:
<img src="/ClassLibraryName/images/logo.png" />
若要存取儲存在應用程式套件內的檔案,但卻無法從程式碼推斷出基底文件的根,請使用 ms-appx: 配置。
var uri = new Windows.Foundation.Uri('ms-appx:///images/logo.png');
Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri).done(function (file) {
...
});
若要存取儲存在應用程式隨附之架構或程式庫套件中的檔案,請使用絕對 URI (和 ms-appx: 配置)。
<script src="ms-appx:///Bing.Maps.JavaScript//js/veapicore.js"></script>
若要存取將載入網路區間的檔案,請使用 ms-appx-web: 配置。
<iframe src="ms-appx-web:///html/webcompartment.html"></iframe>
若要存取相同網頁或本機區間中的檔案做為目前文件,請不要指定配置。
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
應用程式資料
若要存取儲存在應用程式資料的檔案,請使用 ms-appdata: 配置。 應用程式資料可以儲存在 local 資料夾、roaming 資料夾或 temp 資料夾。
若要存取儲存在 local 資料夾中的檔案:
<img src="ms-appdata:///local/images/logo.png" />
若要存取儲存在 roaming 資料夾中的檔案:
<img src="ms-appdata:///roaming/images/logo.png" />
若要存取儲存在 temp 資料夾中的檔案:
<img src="ms-appdata:///temp/images/logo.png" />
storage file APIs 可以用相同的方法存取應用程式套件內的檔案:
var uri = new Windows.Foundation.Uri('ms-appdata:///local/images/logo.png');
Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri).done(function (file) {
...
});
事件和內容變更
必要時,您的應用程式要負責更新資源的顯示。
系統可能會在 Windows 市集應用程式執行時進行變更,例如使用者開啟高對比時。這樣會讓應用程式使用另一組不同的限定詞。各種系統變更會在 ResourceContext 物件上叫用事件。
在 JavaScript 中,接聽這些事件最簡單的方式是透過 addEventListener 方法:
WinJS.Resources.addEventListener('contextchanged', refresh, false);
影像元素不會在內容變更時自動更新,必須由應用程式取代影像。CSS 媒體查詢是一種替代方法,可立即更新 CSS 屬性 (例如 background-image)。