自訂資料夾的 Web 檢視

發行項
06/13/2023

[此功能僅支援 Windows XP 或更早版本。 ]

Web 檢視是使用 Windows 檔案總管來顯示 Shell 資料夾內容相關資訊的強大彈性方式。

簡介
使用 Web 檢視範本
- 範本本文
- 範本前端
總結

簡介

Windows 提供使用者兩種主要方式來檢視和流覽 Shell 命名空間。這些最熟悉的傳統樣式類似于熟悉的 Windows 檔案管理員。右窗格會以五種格式之一列出目前選取資料夾的內容：大型圖示、小型圖示、清單、詳細資料和縮圖。 Windows 檔案管理員的主要差異在於左窗格，看起來與 Windows Internet Explorer 的檔案總管列非常類似。它可以調整大小或移除，而且除了熟悉的檔案系統樹狀結構之外，也可以顯示數個窗格，例如搜尋窗格。

注意

本檔中的資訊不適用於 Windows XP，討論的技術僅適用于舊版 Windows。

下圖顯示傳統樣式的 [印表機] 資料夾。

印表機資料夾的傳統樣式。

傳統樣式適用于一般檔系統資料夾和檔案。不過，隨著 Windows 95 的引進，檔案系統已演進至命名空間。命名空間允許建立 虛擬資料夾，例如印表機或網路鄰近地區，可代表與一般檔系統資料夾非常不同的資訊類型。

Web 樣式也稱為 Web 檢視，提供比傳統樣式更彈性且強大的呈現資訊方式。在 Web 檢視中，使用者基本上會檢視並使用 Internet Explorer 流覽命名空間。 Web 檢視的基本版面配置類似于傳統樣式。總管列不會變更。不過，檔案清單所佔用的區域會變成一般用途的顯示區域，而該區域實際上是網頁。 Web 檢視仍可用來顯示資料夾內容的相關資訊，但顯示哪些資訊有一些限制，或如何顯示。每個資料夾都可以有自己的 Web 檢視，自訂以符合其特定功能。

下圖顯示 [印表機] 資料夾的 Web 檢視， (先前以傳統樣式顯示) 。

印表機資料夾的預設網頁檢視。

與傳統網頁類似，網頁檢視是由 HTML 型範本所控制。撰寫網頁檢視範本與撰寫網頁幾乎相同，並提供相同程度的內容和資訊配置。網頁檢視範本可以使用動態 HTML (DHTML) 和腳本來回應事件，例如使用者按一下專案。它們也可以裝載物件，以允許它們從資料夾或其內容取得和顯示資訊。

使用者可以啟動 Windows 檔案總管，按一下 [檢視] 功能表上的 [資料夾選項]，然後選取此選項：在資料夾中啟用 Web 內容。不過，使用者也可以啟動 Internet Explorer，然後按一下 [ 檢視 ] 功能表、指向 [檔案總管列]，然後按一下 [資料夾]，以在檔案系統上指向瀏覽器。在 Web 檢視中，Internet Explorer 與 Windows 檔案總管之間幾乎沒有任何差異。

在右窗格的左側，[印表機網頁] 檢視會顯示具有資料夾名稱和圖示的橫幅，後面接著資料夾的相關資訊區塊。一般檔案清單會佔用頁面右側。

當使用者按一下專案時，專案的詳細資訊會出現在資訊區塊中。 [印表機網頁] 檢視實際上會顯示與傳統樣式中可用的資訊相同，但會以更可用的格式執行。不過，Web 檢視不只是顯示傳統樣式資訊的不同方式。例如，有用的網站連結可以顯示在資訊區塊下方，這是傳統樣式中無法使用的功能。如果使用者按一下連結，則會顯示網站。

上圖中顯示的印表機 Web 檢視類似于傳統樣式，因為基礎 Web 檢視範本 (.htt 檔案) 以這種方式撰寫。例如，Web 檢視範本不會直接產生檔案清單。它是由 WebViewFolderContents 物件所裝載的 Web 檢視範本所建立和顯示。物件的方法和屬性可讓 Web 檢視控制其版面配置，並取得特定專案的相關資訊。橫幅和資訊區塊的內容和配置是在 Web 檢視範本中指定。

因為 Web 檢視支援 DHTML，所以範本也可以用來處理使用者互動。例如，當使用者按一下其中一個印表機圖示時， WebViewFolderIcon 物件會引發 SelectionChanged 事件。此範本會使用以腳本撰寫的 DHTML 事件處理常式來擷取要求的資訊，並將其顯示在資訊區塊中。

[印表機] 資料夾的這個簡單範例並不表示使用 Web 檢視的唯一方式。藉由撰寫您自己的範本，並視需要使用物件，您可以使用 Web 檢視來顯示資訊，並以您找到最有效的方式與使用者互動。請注意，目前，Web 檢視範本只會顯示系統定義的虛擬資料夾。雖然開發人員可以藉由實作命名空間延伸模組來建立虛擬資料夾，但必須使用命名空間延伸模組中所述的技術來顯示它。

使用 Web 檢視範本

藉由修改資料夾的 Desktop.ini 檔案，即可以有限的方式自訂 Web 檢視中顯示資料的方式。如需詳細資訊，請參閱使用 Desktop.ini自訂資料夾。自訂 Web 檢視的更有彈性且功能強大的方法是建立自訂 Web 檢視範本。

Web 檢視範本會控制 Web 檢視中顯示的內容，以及如何顯示。它會使用標準 HTML、DHTML 和腳本技術來取得和顯示資訊，並與使用者互動。本節討論如何藉由檢查簡單的範本來建立 Web 檢視：Generic.htt。

<html>
    <style>
    <!-- This section defines a variety of styles that can be used
     when displaying the document -->
        body        {font: 8pt/10pt verdana; margin: 0}
        #Banner     {position: absolute; width: 100%; height: 88px; background: URL(res://webvw.dll/folder.gif) no-repeat top left}
        #MiniBanner {position: absolute; width: 100%; height: 32px; background: window}
        #Icon       {position: absolute; left: 11px; top: 12px; width: 64px; height: 64px}
        #FileList   {position: absolute; left: 30%; top: 88px; width: 1px; height: 1px}
        #Info       {position: absolute; top: 88px; width: 30%; background: window; overflow: auto}
        p       {margin-left: 20px; margin-right: 8px}
        p.Title     {font: 16pt/16pt verdana; font-weight: bold; color: #0099FF}
        a:link      {color: #FF6633}
        a:visited   {color: #0099FF}
        a:active    {color: black}
    </style>

    <head>
        <!-- allow references to any resources you might add to the
         folder -->
        <base href="%THISDIRPATH%\">

        <script language="JavaScript">
        
        <!-- This section defines a number of JavaScript utilities -->
            var L_Intro_Text    = "This folder contains a variety of interesting stuff.<br><br>To get information about any of them, click the items icon.<br><br>";
            var L_Multiple_Text = " objects selected.";

            function FixSize() {
            // this function handles layout issues not covered by the style sheet

                var hideTop = 200;
                var hideLeft    = 400;
                var miniHeight  = 32;

                if (200 > document.body.clientHeight) {
                //A short window. Use the minibanner
                    document.all.Banner.style.visibility = "hidden";
                    document.all.MiniBanner.style.visibility = "visible";
                    document.all.FileList.style.top = 32;
                    document.all.Info.style.top = 32;
                }

                else {
                //A normal window. Use the normal banner
                    document.all.Banner.style.visibility = "visible";
                    document.all.MiniBanner.style.visibility = "hidden";
                    document.all.FileList.style.top = (document.all.Banner.offsetHeight - 32) + "px";
                    document.all.Info.style.top = (document.all.Banner.offsetHeight) + "px";
                    document.all.Rule.style.width = (document.body.clientWidth > 84 ? document.body.clientWidth - 84 : 0) + "px";     
                }
                if (400 > document.body.clientWidth) {
                //A narrow window. Hide the Info region and expand the file list region
                    document.all.Info.style.visibility = "hidden";
                    document.all.FileList.style.pixelLeft = 0;
                    document.all.FileList.style.pixelTop = document.all.Info.style.pixelTop;
                }

                else {
                //Normal width
                    document.all.Info.style.visibility = "visible";
                    document.all.FileList.style.pixelLeft = document.all.Info.style.pixelWidth;
                }
                document.all.FileList.style.pixelWidth = document.body.clientWidth - document.all.FileList.style.pixelLeft;
                document.all.FileList.style.pixelHeight = document.body.clientHeight - document.all.FileList.style.pixelTop;
                document.all.Info.style.pixelHeight = document.body.clientHeight - document.all.Info.style.pixelTop;
            }

            function Init() {
                /* Set the initial layout and have FixSize() called whenever the window is resized*/
                window.onresize = FixSize;
                FixSize();
                TextBlock.innerHTML = L_Intro_Text;
            }
        </script>

        <script language="JavaScript" for="FileList" event="SelectionChanged">
            // Updates the TextBlock region when an item is selected
            var data;
            var text;

            // name
            text = "<b>" + FileList.FocusedItem.Name + "</b>";

            // comment
            data = FileList.Folder.GetDetailsOf(FileList.FocusedItem, 3);
            if (data)
                text += "<br>" + data;

            // documents
            data = FileList.Folder.GetDetailsOf(FileList.FocusedItem, 1);
            if (data)
                text += "<br><br>" + FileList.Folder.GetDetailsOf(null, 1) + ": " + data;

            // status
            data = FileList.Folder.GetDetailsOf(FileList.FocusedItem, 2);
            if (data)
                text += "<br><br><b><font color=red>" + data + "</font></b>";

            // tip?
            data = FileList.Folder.GetDetailsOf(FileList.FocusedItem, -1);
            if (data != "" && data != FileList.FocusedItem.Name)
                text += "<br><br>" + data;

            TextBlock.innerHTML = text;
        </script>
    </head>
<!-- The body of the document controls the actual data display.
 It uses several scripting objects to communicate with the
 namespace folder, and calls on the JavaScript objects defined
 in the header to handle much of the processing -->
    <body scroll=no onload="Init()">

        <!-- The normal banner. This banner displays the folder
         name and icon at the top of the WebView pane. This banner
         is used if the WebView pane is sufficiently large to
         display the icon and still have room for some information -->
        <div id="Banner" style="visibility: hidden">
            <!-- Display the folder name using a table with nowrap
             to prevent word wrapping. Explorer will replace
              %THISDIRNAME% with the current folder name -->
            <table class="clsStd"><tr><td nowrap>
                <p class=Title style="margin-left: 104px; margin-top: 16px">
                %THISDIRNAME% 
            </td></tr></table>
            <!-- this is more efficient than a long graphic, but it has to be adjusted in FixSize() -->
            <hr id="Rule" size=1px color=black style="position: absolute; top: 44px; left: 84px">
            <!-- Load the WebViewFolderIcon object, which extracts the folder's icon -->
            <object id=Icon classid="clsid:e5df9d10-3b52-11d1-83e8-00a0c90dc849">
                <param name="scale" value=200>
            </object>
        </div>

        <!-- The mini banner. This banner is used when the
         WebView pane is too short to display the icon. Instead,
          it displays only the folder name -->
        <div id="MiniBanner" style="visibility: hidden">
            <!-- use a table with nowrap to prevent word wrapping -->
            <table class="clsStd"><tr><td nowrap>
                <p class=Title style="margin-left: 16px; margin-top: 4px">
                %THISDIRNAME%
            </td></tr></table>
        </div>

        <!-- The Info region. This displays the information
         associated with a folder or file. Javascript in the header
         is used to generate the regions contents by assigning
         a text block to TextBlock.innerHTML -->
        <div id="Info">
            <p style="margin-top: 16px");
            <span id="TextBlock">
            </span>
        </div>
        <!-- end left info panel -->

        <!-- Load the WebViewFolderContents object. This object
         returns information on the contents of the folder that
          can be used in the information display.  -->
        <object id="FileList" border=0 tabindex=1 classid="clsid:1820FED0-473E-11D0-A96C-00C04FD705A2"
        </object>

    </body>
</html>

建立您自己的 Web 檢視範本的簡單方式是採用 Generic.htt 並加以修改。因為它相當有限，因此您也應該查看其他更複雜的其他想法範例。您可以搜尋系統來尋找所有 Web 檢視範本所使用的 .htt 擴充功能，以找到它們。如果您想要建立資料夾的自訂範本，您應該從預設的 Folder.htt 範本開始，此範本通常儲存在 C：\Winnt\Web 或 C：\Windows\Web 中。請注意，這些檔案定義為隱藏的，因此您可能需要修改 Windows 檔案總管設定來檢視這些檔案。建立 .htt 檔案之後，它應該標示為唯讀且隱藏。

網頁檢視範本使用 .htt 副檔名，因為它們與傳統.htm檔稍有不同。主要差異在於 .htt 檔案中的數個特殊變數，系統會以目前的命名空間值取代。 %THISDIR% 和 %THISDIRPATH% 變數代表目前選取資料夾的名稱和路徑。 %TEMPLATEDIR% 變數代表儲存 Web 檢視樣式表單的資料夾。

就像大部分的 HTML 範本一樣，.htt 檔案有兩個基本部分：本文和頭。範本本文會控制 Web 檢視的基本版面配置，並載入用來與命名空間通訊的物件，並顯示資訊。前端包含腳本和函式，這些腳本和函式會執行工作，例如處理調整大小並從資料夾取得資訊。大部分的範本，包括 Generic.htt，也包含樣式表單。一般而言，最好在範本中包含樣式表單資訊。當 Web 檢視搭配遠端命名空間使用時，個別樣式表單可能無法正常運作。

範本本文

範本的主體會指定 Web 檢視將呈現的內容。它也是用來顯示資訊和與命名空間資料夾通訊的物件載入的位置。 Generic.htt 所定義的版面配置類似于上一節圖所示的版面配置。有三個顯示區域：檢視左側的橫幅和資訊區塊，以及右側的檔案清單。

區域都是樣式表單和 DHTML 所要使用的指派識別碼。如下一節所述，有兩個可能的橫幅，其識別碼為「橫幅」和「MiniBanner」。資訊區塊區域的識別碼為「Info」。檔案清單物件的識別碼是「FileList」。區域版面配置的詳細資料是由樣式表單和 Microsoft JScript 函式 FixSize處理，稍後會在章節中討論。

橫幅位於顯示頂端，位於 Web 檢視左上角。一般橫幅會顯示資料夾的名稱和圖示，其內容會顯示在右側的檔案清單中。不過，如果視窗太短，則圖示下方可能沒有空間可顯示資訊。基於這個理由，Generic.htt 也會定義只顯示資料夾名稱的迷你看板。這兩個橫幅一開始都會定義為隱藏。 FixSize 會選擇要顯示的，並將它設定為「可見」。

Generic.htt 的一般橫幅是由下列方式定義：

<div id="Banner" style="visibility: hidden">
    <table class="clsStd"><tr><td nowrap>
    <p class=Title style="margin-left: 104px; margin-top: 16px">
        %THISDIRNAME% 
    </td></tr></table>
    <hr id="Rule" size=1px color=black style="position: absolute; top: 44px; left: 84px">
    <object id=Icon classid="clsid:e5df9d10-3b52-11d1-83e8-00a0c90dc849">
        <param name="scale" value=200>
    </object>
</div>

橫幅區段的第一個部分會顯示標題，其下方有水準規則。資料表標記可用來控制其位置。 nowrap 屬性已設定為標記以防止自動換行。系統會將 %THISDIRNAME% 取代為目前資料夾的名稱。接著會載入 WebViewFolderIcon 物件，其識別碼為「圖示」，然後載入以擷取並顯示資料夾的圖示。

迷你看板區段類似于一般橫幅。標題的格式會稍微高一點，而且沒有規則。因為沒有圖示，所以不會載入 WebViewFolderIcon 物件。

<div id="MiniBanner" style="visibility: hidden">
    <table class="clsStd"><tr><td nowrap>
        <p class=Title style="margin-left: 16px; margin-top: 4px">
        %THISDIRNAME%
    </td></tr></table>
</div>

資訊區域

橫幅下方的網頁檢視部分是用來呈現所選項目的詳細資訊。如果未選取任何專案，則會顯示預設訊息。因為 Generic.htt 只會顯示單一文字區塊，所以本節相當簡單。

<div id="Info">
    <p style="margin-top: 16px");
        <span id="TextBlock">
        </span>
</div>

收集資訊的大部分工作都是由章節稍後討論的資料夾資訊腳本所處理。它會將文字指派給 TextBlock.innerHTML來顯示資訊。

您可以藉由修改這些元素或包括其他元素，輕鬆地自訂資訊顯示。您可以使用您可以在網頁上放置的任何專案。例如，若要顯示網站的連結，您可以在 Generic.htt 中的文字區塊後面新增錨點元素。

<div id="Info">
    <p style="margin-top: 16px");
        <span id="TextBlock">
        </span>
        <span>
        <p> Click on <a href="https://your.address"></a>
        </span>
</div>

FileList 區域

最後，Generic.htt 會載入 FileList 區域的 WebViewFolderContents 物件。因為識別碼設定為「FileList」，所以它現在會稱為 FileList 物件。

<object id="FileList" border=0 tabindex=1 classid="clsid:1820FED0-473E-11D0-A96C-00C04FD705A2"
        </object>

FileList 物件可在大部分的 Web 檢視中找到，並提供數個用途。 FileList 會顯示所選資料夾所包含的專案清單，其選項和外觀與傳統樣式中的檔案清單相同。選取專案時，FileList 會引發 SelectionChanged 事件來通知 Web 檢視。 FileList 也會公開方法與屬性，可用來擷取個別專案的相關資訊，以及控制其顯示區域的位置和大小。

雖然 FileList 物件非常有用，但它只會傳回標準檔案系統資訊，例如檔案大小或屬性。若要從 Shell 資料夾擷取其他類型的資訊，您必須載入及處理其他物件。網頁可裝載的任何物件都可以搭配 Web 檢視使用。

範本前端

Web 檢視範本的前端包含執行大部分實際工作的腳本和函式。需要處理兩個基本工作。其中一個是 Web 檢視顯示的版面配置，需要調整才能容納不同的顯示區域。另一個則是在選取專案時，從資料夾擷取和顯示資訊。如同樣式表單，最好在範本中包含所有腳本和函式，而不是將它們參考為個別檔案。

控制 Web 檢視版面配置

Web 檢視可用的區域取決於 Web 檢視視窗的大小，以及 Windows 檔案總管列佔用多少。每當視窗或 Windows 檔案總管列調整大小時，此區域就會變更。因此，當 Web 檢視載入時，配置必須符合可用的區域，並在調整其大小時適當變更。大部分的版面配置都是在樣式表單中指定。例如，資訊區域的定義是佔用 Web 檢視最左邊的 30%。

#Info       {position: absolute; top: 88px; width: 30%; background: window;
    overflow: auto}

當 Web 檢視調整大小時，資訊區域的寬度將會變更，以維持該百分比。 FixSize 會管理樣式表單無法處理的版面配置問題。

載入和初始化 Web 檢視

載入 Web 檢視時，必須調整版面配置以符合可用的顯示區域。因為尚未選取任何專案，所以 Web 檢視通常會顯示套用至整個資料夾的一些預設資訊。若要處理初始化，Generic.htt 的 < BODY > 標籤會偵測 onload 事件並呼叫 Init 函式。

<body scroll=no onload="Init">

Init 是簡單的 JScript 函式。

function Init() {
    window.onresize = FixSize;
    FixSize();
    TextBlock.innerHTML = L_Intro_Text;
}

Init 會將 FixSize 系結至 window.onresize 事件，以便在 Web 檢視顯示區域變更時呼叫它。然後，它會執行 FixSize 來設定初始配置，並將L_Intro_Text指派給 Info 區域。 L_Intro_Text是樣式表單區段中定義的簡介文字區塊。

var L_Intro_Text    = "This folder contains a variety of interesting stuff.<br>
<br>To get information about any of them, click the items icon.<br><br>";

使用 FixSize 函式調整版面配置

FixSize函式可用來指定樣式表單無法處理的版面配置數個層面。

根據 Web 檢視的高度而定，有兩個可用的橫幅。

if (200 > document.body.clientHeight) {
    //A short window. Use the minibanner.
    document.all.Banner.style.visibility = "hidden";
    document.all.MiniBanner.style.visibility = "visible";
    document.all.FileList.style.top = 32;
    document.all.Info.style.top = 32;
}
else {
    //A normal window. Use the normal banner.
    document.all.Banner.style.visibility = "visible";
    document.all.MiniBanner.style.visibility = "hidden";
    document.all.FileList.style.top = (document.all.Banner.offsetHeight - 32) + "px";
    document.all.Info.style.top = (document.all.Banner.offsetHeight) + "px";
    document.all.Rule.style.width = (document.body.clientWidth > 84 ?                                    document.body.clientWidth - 84 : 0) + "px";      
}

Generic.htt 使用高度 200 圖元做為一般和迷你廣告工具之間的分隔線。它會將所選橫幅的樣式設定為可見，並將另一個設定為隱藏。它也會設定 Info 和 FileList 區域的數個版面配置屬性，使其能適當地配合選取的橫幅。

如果 Web 檢視太窄， FixSize 會針對 FileList 顯示使用顯示區域的完整寬度。

if (400 > document.body.clientWidth) {
    //A narrow window. Hide the Info region, and expand the file list region.
    document.all.Info.style.visibility = "hidden";
    document.all.FileList.style.pixelLeft = 0;
    document.all.FileList.style.pixelTop = document.all.Info.style.pixelTop;
}

else {
    //Normal width.
    document.all.Info.style.visibility = "visible";
    document.all.FileList.style.pixelLeft = document.all.Info.style.pixelWidth;
}

Generic.htt 使用 400 圖元做為窄寬顯示器之間的分隔線。如果 Web 檢視太窄， FixSize 會隱藏 Info 區域並修改 FileList pixelLeft 屬性，使其填滿橫幅下方的整個區域。

最後幾行 FixSize 會根據上述程式碼的結果來調整數個版面配置屬性。 FileList 區域的寬度會調整，使其完全填滿資訊區域未佔用的網頁檢視部分。資訊區域的高度會調整為符合橫幅和 Web 檢視底部的大小。

document.all.FileList.style.pixelWidth = document.body.clientWidth
    document.all.FileList.style.pixelLeft;
document.all.FileList.style.pixelHeight = document.body.clientHeight
    document.all.FileList.style.pixelTop;
document.all.Info.style.pixelHeight = document.body.clientHeight
    document.all.Info.style.pixelTop;

擷取及顯示資料夾資訊

當使用者選取專案時，FileList 物件會引發 SelectionChanged 事件。此事件是由 JScript 腳本處理。為了簡單起見，Generic.htt 中找到的腳本假設一次只能選取一個專案。

<script language="JavaScript" for="FileList" event="SelectionChanged">
    // Updates the TextBlock region when an item is selected.
    var data;
    var text;

    // Name
    text = "<b>" + FileList.FocusedItem.Name + "</b>";

    // Comment
    data = FileList.Folder.GetDetailsOf(FileList.FocusedItem, 3);
    if (data)
        text += "<br>" + data;

    // Documents
    data = FileList.Folder.GetDetailsOf(FileList.FocusedItem, 1);
    if (data)
        text += "<br><br>" + FileList.Folder.GetDetailsOf(null, 1) + ": " + data;

    // Status
    data = FileList.Folder.GetDetailsOf(FileList.FocusedItem, 2);
    if (data)
        text += "<br><br><b><font color=red>" + data + "</font></b>";

    // Tip 
    data = FileList.Folder.GetDetailsOf(FileList.FocusedItem, -1);
    if (data != "" && data != FileList.FocusedItem.Name)
        text += "<br><br>" + data;

    TextBlock.innerHTML = text;
</script>

腳本會使用兩個 FileList 屬性 FileList.FocusedItem和 FileList.Folder 來取得專案的相關資訊。 FileList.FocusedItem會以 FileList.FocusedItem.Name 指定之專案的名稱來識別選取的專案。 FileList.Folder 實際上是 Folder 物件的指標。 Folder 物件的 GetDetailsOf 方法可用來擷取專案的其餘資訊。

所有資訊都會串連成單一文字字串，並以分隔
標籤可讀性。然後，會將文字指派給 TextBlock.innerHTML來顯示。

摘要

本章概述一些可用來自訂 Windows 檔案總管顯示 Shell 資料夾相關資訊的技術。建立Desktop.ini檔案可讓您執行一些簡單的自訂，例如顯示自訂圖示來取代標準資料夾圖示。當資料夾出現在 Web 檢視中時，其版面配置和顯示是由 HTML 型範本控制，以決定顯示哪些資訊以及如何顯示。您可以使用標準 HTML、DHTML 和腳本技術來建立自訂範本，對資料夾的 Web 檢視執行高度控制。

共用方式為