Windows 8.1 なら HTML + JS で書かれたストアアプリでも WebView が使用できる

Windows 8 向けの Windows ストアアプリの中に web ページを表示する必要があるとき、XAML と C# や C++ などを使って開発する場合は WebView を使用することができました。しかし、HTML + JS で開発する場合は、WebView の代わりに iframe を使うしかありませんでした。

Windows 8.1 では、HTML + JS でも WebView が使えるようになります! 非常にうれしいですね!!!

(Windows 8.1 Preview の情報をもとに記述しています。 Windows 8.1 の正式リリース版でも WebView は使えると思いますが、この記事はあくまで Preview 版での情報であることにご注意ください。)

`iframe` の代わりに WebView を使う

HTML 文書中に x-ms-webview というタグを記述することで WebView を設置できます。

<x-ms-webview id="webview" src="http://vividcode.hatenablog.com/" style="width: 640px; height: 800px; border: solid 1px white;"></x-ms-webview>

何が嬉しいの?

iframe ではいろいろと制約があったので、それらの制約がなくなることが嬉しいところです。

たとえば、はてなブログの HTTP レスポンスヘッダには X-Frame-Options: DENY が含まれているため、iframe 内に表示することはできませんでした。 WebView を使えば、そんな X-Frame-Options: DENY な web ページもストアアプリ中に表示できます。

あとはページの遷移などのナビゲーションをアプリのプログラム側から行えるようになるといったこともあります。

ブラウジングの機能: JS からの操作

たとえば以下のようにして前のページに戻すことができます。

var webview = document.getElementById("webview");
webview.goBack();

goBack()、goForward() メソッドで履歴の移動
canGoBack、canGoForward プロパティで履歴の移動が可能かどうかわかる
あとは refresh() メソッドで更新、stop() メソッドで読み込み停止とか

XAML + C# などの WebView だとページ遷移の際に発火するイベントなども定義されています~~が、ドキュメントに書かれてないので HTML + JS の WebView だと使えないかもしれないですね。~~し、JS では、XAML + C# などで使われるイベント名の頭に「MSWebView」をつけたイベント名でイベントを扱えるみたいです。

サンプルコードより: HTML WebView control sample (Windows 8.1) in C#, C++, JavaScript for Visual Studio 2013

var webviewControl = document.getElementById("webview");
webviewControl.addEventListener("MSWebViewNavigationStarting", navigationStarting);
webviewControl.addEventListener("MSWebViewContentLoading", contentLoading);
webviewControl.addEventListener("MSWebViewDOMContentLoaded", domContentLoaded);
webviewControl.addEventListener("MSWebViewNavigationCompleted", navigationCompleted);
webviewControl.addEventListener("MSWebViewUnviewableContentIdentified", unviewableContentIdentified);