Share via

  • 發行項

IE 10 平台預覽版

HTML5

HTML5 進行中草稿中的功能特性，自 Internet Explorer 8 開始支援，一直延續至 Internet Explorer 9。對於這份越來越顯重要的規格，IE10 平台預覽版中再支援了更多功能，包含以下：

  • 執行非同步指令碼
  • 拖放
  • 檔案 API
  • 表單驗證
  • HTML5 剖析
  • 沙箱
  • Web Worker 多執行緒模型
  • 通道訊息傳遞

執行非同步指令碼

script 元素的 async 屬性能讓該元素內的指令碼非同步地讀取與執行 (相對於其他頁面內容)。也就是說，當網頁正在被剖析 (parse) 時，指令碼能夠同時在背景讀取以及執行。對於指令碼中需進行大量運算的網頁來說，async 屬性可以大幅提昇網頁讀取的效能。.

async 屬性

async 屬性是 W3C HTML5 標準中的一部分，此屬性是設計來加強網頁指令碼需儘快執行且彼此間無相依性時的網頁效能。在下面的假想範例中，請記住如果沒有 async (或 defer) 屬性，指令碼是會阻擋其他頁面內容讀取的：

Lilah 擁有自己的個人部落格，她在部落格上放了數個以指令碼撰寫的小插件。這些插件可以增強訪客的瀏覽體驗，但是即使這些插件沒有讀取完成，部落格也能正常運作。（她希望關閉指令碼功能的使用者也獲得良好的瀏覽體驗）目前她已將所有的插件指令碼置於 HTML 最前頭，但她卻仍收到一些因為指令碼執行太久而造成網頁讀取過慢的抱怨。她試著把指令碼擺到網頁的最底部，希望能加快網頁的讀取，但是她的部落格中的內容實在太多了，把指令碼放到網頁底部後，增強使用者體驗的動作會太慢執行。她真正想要的是，讓插件能夠儘快地執行，而且又能不阻擋其他頁面內容的讀取。在大略搜尋一番後，她發現她需要的正是 HTML5 中的 async 屬性。她把所有指令碼撰寫的插件放到一個外部檔案，再搭配下面的標記，她的部落格在讀取效能與加強瀏覽體驗上取得了平衡：

<head>
  <title>Lilah's Blog</title>
  <script async src="widgets.js"></script>
</head>

Internet Explorer 平台預覽版同時支援 script 元素的 async 與 defer 屬性 (較早的 Internet Explorer 就已支援 defer 屬性)。async 以及 defer 屬性只能在script 元素具有 src 屬性時被使用。以下是四個可能的組合：

<script src="widgets.js"></script> 此 script 元素將立刻執行，且頁面將等候指令碼執行完畢才會繼續被剖析讀取。這可能會大幅減低頁面讀取的效能。
<script async src="widgets.js"></script> 此 script 元素內容將在頁面剖析時，同時進行讀取。指令碼下載完成後就會被執行。
<script defer src="widgets.js"></script> 此 script 元素內容將在頁面完全剖析結束後才執行。
<script async defer src="widgets.js"></script> 同時具有 async 以及 defer 屬性時，defer 屬性會被忽略。這讓開發者能在支援 async 的瀏覽器中獲得 async 屬性帶來的好處，且在不支援 async 屬性的瀏覽器中退而求其次使用 defer 屬性。


總的來說，async 屬性讓網頁開發者以極小的付出即可改善頁面讀取的效能。此外，async 屬性也讓指令碼讀取函式庫 (script loader libraries) 能較不必為了非同步執行指令碼對不同瀏覽器進行各種特殊的處理。

HTML5 拖放

使用者多認為拖放 (Drag-and-drop, DnD) 功能是理所當然應該具備的。Internet Explorer 9 與更早的版本就已經支援 dataTransfer 物件與拖移圖片、超連結與文字的事件。Internet Explorer 平台預覽版中，對所有元素加入了 draggable 屬性並支援由桌面端拖動一個甚至多個檔案放到網頁上。

draggable 屬性

draggable 屬性讓您可將任何 HTML 元素設定為可以在頁面上拖移。draggable 屬性提供了以下幾種狀態：

draggable = 'true' 此內容可被拖移。
draggable = 'false' 此內容無法被拖移。
draggable = 'auto' 此內容是否可被拖移遵照瀏覽器的預設行為 (文字、超連結以及圖片可被拖移；其他則否)。


舉例來說，以下的程式範例讓使用者可在螢幕上拖動元素：

<button id="mybutton" draggable="true">Drag me</button>
<img src="photo.png" draggable="true" />
<div id="mydiv" draggable="true">Moveable text</div>

當使用者拖動一個可拖移的元素時，Internet Explorer 平台預覽版會顯示一個隨著游標移動的殘影。此外，draggable 屬性是不會繼承的，因此可拖移元素的子元素不會也可拖移。

dataTransfer 物件的 files 屬性

dataTransfer 物件新增的 files 屬性讓您可以從本機端的資料夾或桌面拖拉檔案到網頁上。這可以讓您輕鬆建立一些便利的網頁應用軟體，譬如：可直接拖拉加入附檔的電子郵件軟體或可透過拖拉來新增圖片的圖片展示軟體。

下面的事件傾聽器以及 dropHandler 函式展示了如何建立一個使用者可以拖動檔案置於其上的區域。範例中的 dropspot 函式可以是 div、image 或其他頁面上的元素。dragover 以及 drop 事件以 doNothing() 函式防止事件以預設的方式被處理並避免事件往上傳遞 (bubbling)，這可避免一些不可預測的結果。

// this function runs when the page loads to set up the drop area
function init() 
{
  // Set the drop-event handlers
  var dropArea = document.getElementById("dropspot");
  dropArea.addEventListener("drop", dropHandler, false);
  dropArea.addEventListener("dragover", doNothing(event), false);
}
function dropHandler(event)
{
  // use our doNothing() function to prevent default processing 
  doNothing(event);
  // get the file(s) that are dropped
  var filelist =  event.dataTransfer.files;
  if (!filelist) return;  // if null, exit now
  var filecount = filelist.length;  // get number of dropped files

  if (filecount > 0) 
  {
    // Do something with the files.         
  } 
}
// Prevents the event from continuing so our handlers can process the event.
function doNothing(event)
{
  event.stopPropagation();
  event.preventDefault();
}

檔案 API

Internet Explorer 平台預覽版支援了檔案 API。檔案 API 是 W3C 的一網頁規格草案，用以代表網頁應用程式中的檔案物件，並讓這些檔案物件能透過程式選擇與讀取。檔案 API 正由 W3C Web Application Working Group 進行標準制定。藉由檔案 API，網頁開發者能以安全的方式存取本機端檔案，不再需要任何擴充套件或外掛。

詳細內涵

檔案API 讓瀏覽器在使用者許可的權限下，讀取與操作檔案。此外，檔案 API 能在不使用外掛的環境下，提供流暢的檔案上傳體驗。

以下 W3C 檔案 API 範例中，不同的區塊分別處理檔案的進度變動、發生錯誤以及成功處理等狀態：

function startRead() {
  // Obtain input element through DOM.

  var file = document.getElementById('file').files[0];
  if(file) {
    getAsText(file);
  }
}

function getAsText(readFile) {

  var reader = new FileReader();

  // Read file into memory as UTF-16      
  reader.readAsText(readFile, "UTF-16");

  // Handle progress, success, and errors
  reader.onprogress = updateProgress;
  reader.onload = loaded;
  reader.onerror = errorHandler;
}

function updateProgress(evt) {
  if (evt.lengthComputable) {
    // evt.loaded and evt.total are ProgressEvent properties.
    var loaded = (evt.loaded / evt.total);

    if (loaded < 1) {
      // Increase the progress bar length.
      // style.width = (loaded * 200) + "px";
    }
  }
}

function loaded(evt) {  
  // Obtain the read file data.    
  var fileString = evt.target.result;

// Handle UTF-16 file dump
  if(utils.regexp.isChinese(fileString)) {
    //Chinese Characters + name validation.
  }
  else {
    // Run other charset test.
  }
  // xhr.send(fileString)     
}

function errorHandler(evt) {
  if(evt.target.error.code == evt.target.error.NOT_READABLE_ERR) {
    // The file could not be read.
  }
}

其他改進

其他檔案處理相關的改善包括：

  • 能過濾檔案類別的多檔上傳功能 (個別檔案最多 4GB)。以下例子中，使用者可選取多個 GIF 與 JPEG 檔案：
  • <input type="file" name="pic" multiple accept="image/gif, image/jpeg" />

更多資訊請見以下 W3C 規格：

HTML5 表單與使用者輸入驗證

Internet Explorer 平台預覽版開始支援 HTML5 中新的 input 類型與屬性。這讓開發者得以使用少量的指令碼，就可輕鬆快速地提示使用者輸入適當的資訊並驗證輸入內容。 在 HTML5 中加入的新 input 類型以前，為了驗證電話號碼欄位是否包含字母、電子郵件欄位是否填入正確的電子郵件，開發者必須要自行撰寫許多驗證邏輯。而有了 HTML5 表單以及輸入驗證的支援後，開發者可以專注於開發更重要的功能，不必再耗費時間撰寫驗證邏輯了。

input 元素的新類型：URL 與 email

新的 HTML5 input 類型提供內建的驗證邏輯給網頁開發者， input 元素的新類型包含 URL 以及 email 兩類。URL 類型的 input 元素接受有效的 URL 地址，譬如 https://www.contoso.com。相同的，email 類型的 input 元素接受符合 email 格式的輸入值，譬如 joe@contoso.com。以下的範例中，若使用者輸入錯誤的 URL 或是 email 位址，Internet Explorer 會顯示錯誤訊息。

<input type="url" name="url"/>
<input type="email" name="email"/>

input 元素的新屬性

Internet Explorer 平台預覽板中開始支援 HTML5 中新的 input 屬性，例如 required、pattern 以及 placeholder。使用這些新屬性，可讓開發者確保使用者在網頁上輸入資料並確認資料的正確性。

具有 required 屬性的元素將成為一個必填欄位，若其沒有任何輸入值的話，此元素將會無法送出。這個屬性可以指定給 textarea、select 以及 URL、email、checkbox 或 radio 類型的 input 元素。required 屬性是一個布林屬性，僅需指定於元素上即可生效。當使用者將滑鼠游標置於一個標記為 required 的元素上時，若您沒有另外設定元素的 title 屬性，使用者會看到一個視窗提示此元素為必填欄位。

<form id="yourname">
  <label>Enter your first name: 
    <input name="firstname" type="text" required><input type="submit" value="Go"/>
  </label>
</form>

若使用者試圖在沒有輸入必填欄位內容時送出表單，使用者將會收到錯誤訊息，且鍵盤焦點將被置於未填的必填欄位上。

pattern 屬性讓您可以定義使用者輸入值必須符合的規則運算式。pattern 屬性可用於以下類型的 input 元素：text、search、url、tel、email、以及 password。

<form>
<label>
  <input type="tel" name="tel" pattern="\(\d\d\d\) \d\d\d\-\d\d\d\d" 
   title="enter a telephone number in   the format (xxx) xxx-xxxx"/>
  <input type="submit"/>
</label>
</form>

min、max 與 step 屬性可用於 number 類別的 input 元素。min 與 max 屬性定義了該欄位可接受的最大及最小值。step 屬性則定義該欄位值每一次遞增或遞減時的變動量。舉例來說，若 min=0 且 step=1 則欄位可能數值為 0、1、2、3... 。若 min=1.1 且 step=1，則欄位可能的數值則為 1.1、2.1、3.1... 。下面的範例為一個僅能輸入 0 至 10 中的偶數的 input 元素。任何奇數或是超出此範圍的數值都會令表單無法送出並顯示錯誤訊息。

<form>
  <label>Enter an even number between 0 and 10: 
    <input type="number" min="0" max="10" step="2"/> 
    <input type="submit"/>
  </label>
</form>

通常指引使用者至正確的欄位，並向使用者展示如何輸入資料，有助於取得正確的資料。對於 HTML5 placeholder 規格的支援，即可幫忙指引使用者如何在表單中輸入正確的資料。

placeholder 字串。在 input 元素中定義簡短的提示或範例文字。可用於textarea 元素與以下類型的 input 元素：text、url、text area、以及 email。

placeholder 屬性讓網頁開發者可以在 input 欄位中顯示正確資料的範例。

<input name="url" type="text" placeholder="https://www.contoso.com" />

以上的標記，將在 input 元素中顯示 placeholder 屬性值的文字，直到鍵盤焦點置於此 input 元素上。

placeholder 屬性可被用於 textarea 或是 URL、tel、email類型的 input 元素。

設定 placeholder 的樣式

預設的 placeholder 文字為亮灰色，您可以使用 -ms-input-placeholder 擬類別選擇器來調整其樣式。以下的範例以自定樣式顯示街道以及郵遞區號欄位：

<!DOCTYPE html >
<html>
<head>
  <title>Placeholder style example</title>
  <style type="text/css">
  input  /* normal style */
  {
    background-color:LightGray;
    color:Purple;
  }   
  input.address:-ms-input-placeholder /* placeholder only style */   
  {
    font-style:italic;        
    background-color:yellow;
    color:Red;
  }

  </style></head>
<body>
  <form id="test">
    <p><label>Enter Name: <input id="name" placeholder="Your Name"/></label></p>
    <p><label>Enter Street: <input id="street" class="address" 
placeholder="Your address" /></label></p>
    <p><label>Enter a zip code: <input type="num" pattern="(0-9){5}" 
id="zip" class="address" placeholder="5 digit zip" /></label></p>
    <input type="submit" />
  </form>
</body>
</html>

placeholder 的文字會以指定的樣式顯示，直到鍵盤焦點置於該欄位，也就是使用者將要在該欄位輸入內容時。當該欄位成為焦點後，placeholder 文字會消失，且其樣式將變回一般 input 欄位的正常樣式。

autofocus 屬性讓開發者能在頁面讀取完成後，自動把焦點置於某個欄位上（並提示使用者）。這能提供使用上的指引，並減少使用者在網頁讀取完成後的滑鼠點擊或按 tab 鍵的動作。

autofocus 布林值。設定要在頁面讀取完成時，是否要將焦點置於此欄位。可用於所有的表單控制元素。

一份網頁中，只有一個控制元素可被指定 autofocus 屬性。如果一個以上的元素擁有此屬性，只有其中第一個元素會在頁面讀取後取得焦點。這是一個布林屬性，也就是當元素標記中出現此屬性時，此屬性值即為真。

<input name="email" type="text" placeholder="joe@contoso.com " autofocus />

formnovalidate 與 novalidate 屬性

設定 formvalidate 與 novalidate 屬性，可以讓表單在送出前不需通過驗證。這可以用於實作表單的暫存功能：使用者填了一部分表單，但尚未完成所有必要的欄位時，可以先按送出鈕暫存表單。以下的例子展示了這兩個屬性的使用。formnovalidate 屬性被指定於 submit 按鈕上，而 novalidate 屬性則設定於 form 元素上 (或擁有輸入元素的表單元素)。

<!DOCTYPE html>
<html >
<head>
  <title>no validate example</title>
</head>
<body>
  <form>
    <p><label>*Name: <input type="text" required /></label></p>
    <p><label>*Street: <input type="text" required /></label></p>
    <p><label>*Zip: <input type="text" pattern= "[0-9](5|10)" placeholder="5 or 9 digit ZIP" 
required /></label></p>    <input type="submit" name=submit value="submit" />
    <input type="submit" formnovalidate name="save" value="just save" />
    <p>* Required field</p>
  </form>  <form novalidate>
    <p>Unvalidated area</p>
    <p><label>Name: <input type="text" required /></label></p>
    <p><label>Street: <input type="text" required /></label></p>
    <p><label>Zip: <input type="text" pattern= "[0-9](5|10)" placeholder="5 or 9 digit zip" 
required /></label></p>
    <input type="submit" name=submit value="submit" />
  </form>
</body>
</html>

自訂驗證結果訊息

遇到驗證錯誤時，Internet Explorer 平台預覽版能顯示一些通用的錯誤訊息。但如果您使用 title 屬性，此屬性值將作為該欄位的 alt 文字，並加進格式比對的錯誤訊息。下面的範例展示了一個電話號碼輸入欄位，它能提示使用者應輸入何種格式的電話號碼。

<form>
  <label>Enter a phone number: 
  <input type="text" title="xxx-xxx-xxxx" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
  <input type="submit" />
  </label>
</form>

如果使用者輸入字母或沒有輸入破折號，則會出現以下的回應：

密碼欄位的大寫鎖定警示

為了幫助使用者輸入正確的密碼，當使用者在輸入密碼欄位且大寫鎖定開啟時，Internet Explorer 平台預覽版將顯示警示訊息。開發者不需為此撰寫任何程式碼。

使用新增的擬類別自訂正確欄位的樣式

當使用者輸入有效 (valid) 或無效 (invalid) 資料時給予對應的回饋，相較於跳出錯誤訊息，能提供更好的使用體驗。Internet Explorer 平台預覽版支援兩個 CSS 擬類別：:valid 與 :invalid。讓您能針對 input 元素的種類、資料格式以及是否必填來設定其樣式。舉例來說，一個 URL 欄位可以有紅色的框線，直到使用者輸入有效的位址。一個必填欄位在使用者填入有效資訊前，將保持無效狀態。一個需要驗證的選填欄位，譬如 URL 欄位，在有任何資料輸入前都會是有效狀態。

您也可以使用 :required 以及 :optional 擬類別來設定必填以及選填欄位的樣式。

以下的範例把有效的欄位邊框設為綠色，並把無效的欄位設定為紅邊框搭配粗體字。範例中只有 email 為必填欄位。URL 欄位預先填入了錯誤的 URL，所以在頁面開啟時，URL 欄位將為無效狀態。此外，此範例將兩個選填欄位設為亮灰色背景，必填欄位設為搶眼的黃色背景。

<!DOCTYPE html >
<html>
<head>
  <title>PseudoClass example</title>
  <style type="text/css">

  #PC1 input:valid { 
    border :solid lime;
    font-weight:normal;
  }
  #PC1 input:invalid { 
    border:solid red;
    font-weight:bold;
  }
  #PC1 input:required{
    background-color:Yellow;
  }
  #PC1 input:optional{
    background-color:LightGray;
  }       
  </style>
</head>
<body>
  <form id="PC1">
    <p><label>Enter some text: <input type="text"/></label></p>
    <p><label>*Enter a valid email address: <input type="email" required /></label></p>
    <p><label>Enter a valid URL: <input type="url" value="not a url"/></label></p>       
    <p>* required field</p>
  </form>
</body>
</html>

以此樣式呈現頁面，在使用者輸入資料的時候，表單欄位就能立刻提供回饋給使用者。

輸入驗證的 DOM 方法與屬性

Internet Explorer 平台預覽板中加入了新的 API，透過這些 API 您可以使用 JavaScript 取得表單或元素的驗證狀態。

checkValidity 方法會先靜態驗證的表單的元素，若靜態驗證結果為真，回傳 true，反之則回傳 false。

checkValidity 方法將檢查該元素輸入值是否有效，若有效，回傳 true，反之則回傳 false。如果輸入值無效，一個 invalid 事件會被觸發，此事件可以被取消但並沒有預設的事件。

willValidate 屬性在元素可被驗證時 (如 url 或 email 欄位，或是有設定 validation 屬性) 將為 true，反之則回傳 false。

validity 屬性回傳元素的 ValidityState 物件。此物件會持續存在，每次存取此屬性時，回傳的會是同一個 ValidityState 物件。

validationMessage 屬性將回傳目前表單狀態會顯示的錯誤訊息。譬如，若表單於存取 validationMessage 屬性當下就送出，是無效的。

setCustomValidity 方法能讓您自訂元素的驗證錯誤訊息。

ValidityState 物件具有下列僅可讀取的布林屬性值：

  • valueMissing  使用者尚未填寫必填欄位。
  • typeMismatch  使用者輸入了格式錯誤的資料，譬如格式不正確的 URL 或 email 地址。
  • patternMismatch  使用者輸入的資料與指定的格式不符合，例如使用者在僅能輸入數字的欄位內輸入字母。
  • tooLong  使用者輸入的內容超出了該元素 maxLength 制定的最大長度。因為 internet Explorer 僅允許使用者輸入與 maxLength 屬性一樣多的字元，所以出現此問題時，通常是預設值過長造成的。
  • rangeUnderflow  使用者輸入值小於 min 屬性值。
  • rangeOverflow  使用者輸入值大於 max 屬性值。
  • stepMismatch  使用者輸入值不符合 step 屬性所推算出的規則，譬如在只允許偶數的欄位中輸入奇數。
  • customError  此元素是否有透過 setCustomValidity() 方法設定自訂錯誤訊息。
  • valid  沒有其他狀態為 true。(也就是說，ValidityState 其他屬性皆為 false 時，valid 才為 true)

HTML5 剖析 (Parsing)

延續前幾個版本的努力 ，Internet Explorer 平台預覽版完全支援 HTML5 剖析演算法，希望讓 HTML 能夠以相同的方式跨平台運作。這包含了 SVG-in-HTML、HTML5 語意元素、保留未知的元素並改善空白字元處理。

邁向正確的行為

Internet Explorer 開發小組努力地開發 HTML 剖析器，是希望所有 HTML 在各個現代瀏覽器上都是以同樣的方式被剖析的。因為 HTML5 首次定義了完整的 HTML 剖析規則（詳細到邊際案例與錯誤狀況之處理方式），這個目標才可能落實。甚至您的 HTML 標記是無效時，HTML5 也定義了剖析的方法，而 Internet Explorer 預覽版正是遵循這些規則。以下的剖析範例展示了一些案例是如何被修正來改善剖析結果：

HTML DOM ( HTML5 + IE10 ) DOM ( IE9 )
<b>1<i>2</b> |- <b>
  |- "1"
  |- <i>
    |- "2"		 |- <b>
  |- "1"
  |- <i>
  |- "2"
|- <i>
<p>Test 1
<object>
<p>Test 2
</object>		 |- <p>
  |- "Test 1\n"
|- <object>
  |- "\n "
  |- <p>
    |- "Test 2\n"		 |- <p>
  |- "Test 1\n"
|- <object>
  |- "\n "
|- <p>
  |- "Test 2\n"

可交互操作的 innerHTML

這些改善同樣影響了 innerHTML。如下的程式片段，在 IE10 平台預覽版中，將依照您所期待的運作：

var select = document.createElement("select");
select.innerHTML = "<option>one</option><option>two</option>";
var table = document.createElement("table");
table.innerHTML = "<tr><td>one</td><td>two</td></tr>";

提供給開發者更好的錯誤回報機制

HTML5 能確保標記剖析的一致性，但開發者還是應該從一開始就撰寫有效、正確的 HTML 標記。撰寫正確的 HTML 標記代表您的網站能如預期般運作，並更相容於較舊的瀏覽器。

為了幫助開發者撰寫一致、正確的標記，IE10 平台預覽版開始透過 F12 開發者工具回報 HTML 剖析時發現的錯誤，如下圖：

移除老舊功能

因為某些 Internet Explorer 早期版本中的功能並不相容於 HTML5 剖析規則，這些功能將從 Internet Explorer 平台預覽版中的 IE10 模式中移除。倚賴於這些功能的網站，仍可以透過相容模式繼續運作。如此一來，這些網站仍可以再 Internet Explorer 平台預覽版上良好運作，即使網站的開發者沒有時間或資源進行更新。(查看更多關於相容性模式的資訊，請看 MSDN 上的 Defining Document Compatibility 一文)

條件式註解

您仍可使用如下列範例的條件式註解，但是條件式註解只能針對較早版本的 Internet Explorer。如果您需要區別較新版本的瀏覽器，請使用功能偵測功能偵測

<!--[if IE]>
This content is ignored in IE10 Platform Preview and other browsers.
In older versions of Internet Explorer, this renders as part of the page.
<![endif]-->

自訂元素行為 (Element Behaviors)

自訂元素行為在 Internet Explorer 5.5 推出，範例如下。IE10 平台預覽版中 IE10 模式不再識別自訂的元素行為。

<html xmlns:my>
<?import namespace="my" implementation="my.htc">
<my:element>
This parses as an unknown element in IE10 Platform Preview and other browsers.
In older versions of Internet Explorer, this markup binds to "my.htc".
</my:element>
</html>

XML Data Islands

XML data islands 在 Internet Explorer 5.0 推出，範例如下。IE10 平台預覽版中 IE10 模式不再將 XML Data islands 剖析為 XML。

<xml>
This parses as <b>HTML</b> in IE10 Platform Preview and other browsers.
In older versions of Internet Explorer, it parses as XML.
</xml>

HTML5 沙箱

Internet Explorer 平台預覽版支援了 sandbox 屬性，sandbox 屬性可以對含有不受信任的內容的 iframe 元素開啟安全性的限制。這些限制能防止不安全的內容進行一些可能有危害的行為，進而提昇安全性。

要開啟安全性限制，只需指定 sandbox 屬性即可，如下範例所示：

<iframe sandbox src="frame1.html"></iframe>

當 sandbox 屬性被指定給 iframe 元素時，便是指該 iframe 的內容已被封入沙箱中。

受到沙箱限制的行為

當 iframe 元素被封入沙箱後，以下的動作是受限制的：

  • 封入沙箱的內容，無法開啟彈出式視窗或新的瀏覽器視窗。呼叫開啟彈出式視窗的方法 (如 createPopup()、showModalDialog()、showModelessDialog()、與 window.open()) 將失敗且不產生錯誤。
  • 無法以新視窗開啟超連結。
  • 封入沙箱的內容將被認為來自特別的獨立網域，這將防止不受信任的內容呼叫受到 same-origin policy 保護的 API，例如：cookies、本地儲存以及其他文件的文件物件模型（DOM）。
  • 封入沙箱的內容無法變動最頂層 window 物件的位置 (location)。
  • 封入沙箱的內容無法送出表單資料。
  • 外掛 (object, applet, embed, or frame) 將不會被實體化。
  • 自動執行的元素行為將會被關閉，包括 meta 元素的重新整理動作、input 元素的重新整理動作、audio 與 video 元素的自動播放。
  • • 封入沙箱的內容將無法使用 Internet Explorer 獨有的某些功能，包括 HTML 元件 (HTML Components, HTCs)、Binary Behaviors、資料綁定以及 window.external。

自訂沙箱的限制

Internet Explorer 平台預覽版允許您自訂沙箱的限制，只要將 sandbox 屬性指定為下列的自訂旗標。

allow-scripts 封入沙箱的內容可以執行 JavaScript。
allow-forms 封入沙箱的內容可以送出表單。
allow-same-origin 封入沙箱的內容可以存取由 same-origin policy 保護的 API，例如：本地儲存、cookies、XMLHttpRequest 與同網域下的文件。
allow-top-navigation 封入沙箱的內容可以變更最頂層 window 物件的位置。
ms-allow-popups 封入沙箱的內容可以打開彈出式視窗。


下列的範例展示了一個封入沙箱的 iframe 元素，其中使用自訂旗標設定對於 iframe 內容的限制。

<iframe sandbox="allow-forms allow-same-origin" src="frame1.html"></iframe>

這個例子中，送出表單以及存取本地資料式被允許的。請注意 sandbox 屬性中，不同的旗標值是以空白分隔。

Web Workers 多執行緒模型

Internet Explorer 平台預覽版加入了對 Web Workers 多執行緒模型的支援。Web Workers API 定義了在背景執行指令碼的方式。

傳統上，瀏覽器只有一個執行緒，因而強迫所有網頁中的指令碼在單一的 UI 執行緒中一起執行。雖然您可以透過 setTimeout API 製作出類似多工的感覺，但只要一個需大量計算的工作就可能把使用者的畫面完全卡死。

Web Workers API 讓網頁開發者得以在背景執行指令碼，能與主要頁面同步執行。您也可以一次開啟多個執行緒來處理耗時的工作。一個新的 Worker 物件需要一個 .js 檔，此檔案將以非同步請求由伺服器取得。

var myWorker = new Worker('worker.js');

所有 worker 執行緒間的溝通將以訊息的方式來管理。主從 Worker 雙方皆可透過 postMessage 傳遞訊息並以傾聽 onmessage 事件來接收訊息。訊息的內容將附加於 event 物件的 data 屬性上。

下面的範例建立了一個 Worker 執行緒，並開始接收訊息。

var hello = new Worker('hello.js');
hello.onmessage = function(e) {
  alert(e.data);
};

worker 執行緒送出欲顯示的訊息。

postMessage('Hello world!');

Web Workers 的雙向溝通

要建立雙向溝通，主要頁面以及 worker 執行緒都必須傾聽 onmessage 事件。在下面的範例中，worker 執行緒延遲一段時間之後才回應訊息。

首先，先以指令碼建立 worker 執行緒。

var echo = new Worker('echo.js'); 
echo.onmessage = function(e) {
  alert(e.data); 
}

訊息文字內容與暫停的時間已指定於表單中。當使用者點擊送出按鈕時，指令碼將這兩項資訊以 JavaScript 物件實字的方式傳送給 worker 執行緒。為了避免頁面以新的 HTTP 請求送出表單，事件處理器中呼叫了 event 物件的 preventDefault 方法。請注意您無法發送 DOM 物件的參考給 worker 執行緒。Web Workers 被限制只能存取其所能用的資料。只有 JavaScript 基本資料型態是被允許的，譬如物件或字串值。

<script>
window.onload = function() {
  var echoForm = document.getElementById('echoForm'); 
  echoForm.addEventListener('submit', function(e) {
    echo.postMessage({
      message : e.target.message.value,
  timeout : e.target.timeout.value
}); 
e.preventDefault();
  }, false); 
  }
</script><form id="echoForm">
  <p>Echo the following message after a delay.</p>
  <input type="text" name="message" value="Input message here."/><br/>
  <input type="number" name="timeout" max="10" value="2"/> seconds.<br/>
  <button type="submit">Send Message</button>
</form>

最後，worker 執行緒接收訊息，並在一段時間間隔後回傳訊息。

onmessage = function(e) 
{
  setTimeout(function() 
  {
    postMessage(e.data.message);
  }, 
  e.data.timeout * 1000);
}

在 Internet Explorer 平台預覽版中，Web Workers API 支援以下功能：

方法 說明
void close(); 結束 worker 執行緒。
void importScripts(以DOMString 值表示的 url 列表); 由逗點分隔的 JavaScript 檔案位址列表。
void postMessage(任何資料); 發送訊息至 worker 執行緒，或是由 worker 執行緒送出訊息。

 

屬性 類別 說明
location WorkerLocation 代表一完整的 URL，包括 protocol、host、port、hostname、pathname、search 與 hash 等元件。
navigator WorkerNavigator 代表其身分以及使用者代理用戶端的 onLine 狀態。
self WorkerGlobalScope worker 執行緒的 scope，其中包含了 WorkerLocation 與 WorkerNavigator 物件。

 

事件 說明
onerror 發生一個執行時期的錯誤。
onmessage 收到訊息資料。

WindowTimers 功能

Web Workers API 同時也支援更新版的 HTML5 WindowTimers 功能。

方法 說明
void clearInterval(long 型態的定時處理器 handle); 取消 handle 參數代表的定時處理器。
void clearTimeout(long 型態的定時處理器 handle); 取消 handle 參數代表的定時處理器。
long setInterval(任意處理器 handle, 任意時間間隔值, 任意參數...); 固定於指定的時間間隔（單位為毫秒）後重複執行處理器內容。請注意現在您可以傳送額外的引數給處理器。如果 handle 是為 DOMString，它將被轉譯為 JavaScript。此函式回傳一 long 值，代表此定時處理器。要清除此定時處理器，請使用 clearInterval。
long setTimeout(任意處理器 handle, 任意時間間隔值, 任意參數...); 固定於指定的時間間隔（單位為毫秒）後執行處理器內容。請注意現在您可以傳送額外的引數給處理器。如果 handle 是為 DOMString，它將被轉譯為 JavaScript。此函式回傳一 long 值，代表此定時處理器。要清除此定時處理器，請使用 clearTimeout.

 

通道訊息傳遞

Internet Explorer 10 平台預覽版支援了通道訊息傳遞，它可讓不同瀏覽環境的指令碼透過通訊埠（ports）相互溝通。這個功能是 HTML5 Web Messaging 規格 的一部分。通訊埠建立後，兩端點即可透過 postMessage 方法以及 onmessage 事件進行溝通。

使用 MessageChannel 物件來建立通道，如下所示：

var channel = new MessageChannel();

通道物件同時含有 port1 以及 port2。基本上，一個通訊埠被保留為本地通訊埠，而另一個則送給遠端視窗或 worker 執行緒，通訊埠也可讓 workers 彼此溝通。

下面是一個傳送通訊埠以達成跨文件溝通的例子。請注意通訊埠陣列必須是最後一個參數。

otherWindow.postMessage('hello', 'http://example.com', [channel.port2]);

相同地，您可以透過 postMessage 送出一個通訊埠端點給 worker 執行緒，如下：

worker.postMessage({code:"port"}, [channel.port2]);

隨訊息送出的通訊埠陣列將成為 event 物件的 ports 屬性。通訊埠可以在使用一次後就關閉，必要時也可儲存起來進行多次使用。下面的範例展示了一個 worker 執行緒可以如何接收與使用通訊埠：

// Worker Thread 
onmessage = function (event) {
    if (event.data.code == "port") {
        event.ports[0].postMessage("Port received.");
    }
}

當收到通訊埠後，往後的溝通即可於通訊埠上使用 postMessage 方法以及 onmessage 事件。以下的程式範例定義了一個事件處理器，並使用通道訊息通訊埠傳送訊息。

channel.port1.onmessage = function (event) {
  // Message is in event.data
  alert("Message is: " + event.data);
}

channel.port1.postMessage('hello');

在 Web Worker Fountains 範例中，負責光影效果的 worker 執行緒使用通道訊息傳遞來協調工作。到 IE Test Drive Site 看看這個範例吧。

在 Internet Explorer 平台預覽版中，通道訊息傳遞 API 支援下面功能：

MessageChannel 介面：

屬性 類別 說明
port1 MessagePort 第一個通訊埠。
port2 MessagePort 第二個通訊埠。

MessagePort 介面：

方法 說明
void postMessage( 任意訊息, 任意額外通訊埠); 透過通道傳遞訊息。
void start(); 開始分派訊息。
void close(); 從通訊埠斷線。

 

事件 Description
說明 收到訊息資料。