關於 WebView: 10 件你需要知道的事

  • Article
  1. Ten Things You Need to Know About WebView 是美國微軟資深工程師 Matt Small 發表的文章，我發現有幾點特別值得提出來說明，讓大家更了解 WebView 在 Windows Store App 的應用，希望對大家有幫助；其文後有他的範例程式碼供下載。
  2. 以下是他列出的 10 點需要注意的事:
  3. WebView is not a general-purpose browser
    • WebView 這個控制項的目的，是讓你能在 App 裡，連結到某個特定的網頁，以達到此 App 所欲提供的功能；而非讓使用者能任意瀏覽任何網頁。舉例來說，如果有些特定資訊可能會時常變動 (如即時路況等)，與其重新上架你的 App，將這資訊放在 WebView 當然比較適當；但如果你的 App 只是純粹作為一個入口，僅是讓使用者透過 WebView 瀏覽到某個網站首頁，再讓使用者在網站中任意點選連結的話，是非常有可能在上架審查中被退件的。
  4. WebView always renders on top of XAML
    • 這點還滿有趣的，你會發現在 XAML 中 WebView 不論放在什麼位置，程式跑起來時 WebView 一定會擋在所有的控制項之上。原因是 WebView 並非 Control object 的 subclass 的關係；原文連結裡有解法可參考。
  5. WebView doesn’t do Flash. Or Silverlight. Or PDF. Or any other ActiveX control or plugin.
    • 如第1點所言， WebView 並非是一個完整的瀏覽器，為了穩定性及效能的原因並不支援 Flash, Silverlight, PDF or ActiveX，同時「目前」也不支援某些 HTML5 的功能，如 AppCache, IndexedDB, programmatic access to the Clipboard, or geolocation.
  6. How to invoke Javascript inside the displayed webpage of a Webview
    • 簡單來說 WebView 可以透過 ms-appx-web 讀取並展示已包含在你的 App 專案中的 HTML 檔案，甚至執行其中的 JavaScript 副程式。而以下的 5, 6, 8 三點都算是延伸此點的應用。
  7. How to receive information from the WebView
  8. How to inject javascript into a WebView page
  9. How to clear the WebView cache
    • 很不幸的，並無法透過程式的方式來清除 WebView cache，只能透過 command line 的方式: C:\Users\<username>\AppData\Local\Packages\<PackageName>\Attrib –H –S /S /D
  10. How to embed a font into your app to be used by WebView
    • image
  12. How to get rid of those annoying JavaScript exceptions when debugging
    • 在 debug 時當 WebView 瀏覽到的網頁出現 JavaScript 例外，會出現 Just-In-Time Debugger 的惱人錯誤 (如例圖)，要關掉它很簡單，只要在 Visual Studio 2012 中作以下設定即可:
    • Debug > Options and Settings > Debugging > Just-In-Time > Uncheck "Script"
    • 偵錯 > 選項和設定> 偵錯 > Just-In-Tim > 取消勾選「指令碼」
      image
      其實以上大部份的內容在 WebView 的 MSDN 官方文件的 Remakrs 段落中都有說明，只是可能沒有很細節的描述，在此也一併轉貼如下給大家參考:
      Remarks
      WebView is not a Control subclass and thus does not have a control template. The display area is the Width and Height.
      WebView has the characteristic that other UI regions such as controls cannot be rendered on top of the WebView. This is because of how window regions are handled internally, particularly how input events are processed and how the screen draws. If you want to render HTML content and also place other UI elements on top of that HTML content, you should use WebViewBrush as the render area. The WebView still provides the HTML source information, and you reference that WebView through the SourceName property. WebViewBrush does not have this overlay limitation.
      If you want to display an interactive WebView that only occasionally has overlapping content (such as a drop-down list or app bar), you can temporarily hide the WebView control when necessary, replacing it with an element using a WebViewBrush fill. Then, when the overlapping content is no longer present, you can display the original WebView again. For more info, see the WebView control sample.
      WebView doesn’t support many of the UIElement events like KeyDown, KeyUp, and PointerPressed. A common workaround to this problem is to use WebView.InvokeScript with eval to use the HTML event handlers, and to use window.external.notify from the HTML event handler to notify the application using WebView.ScriptNotify.
      Note WebView always uses Internet Explorer 10 in document mode. Additionally, WebView does not currently support some HTML5 features including AppCache, IndexedDB, programmatic access to the Clipboard, or geolocation. Furthermore, WebView does not support the ms-appdata scheme, although it does support the ms-appx-web scheme. This enables you to load content files in your project.