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 だと使えないかもしれないですね。
サンプルコードより: 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);
そのほかにできること; 参考文献
Local state directories に web ページをダウンロードしてきてオフラインでも WebView 上に表示できるようにするとか、web ページのスクリーンショットを撮るとかできるみたいです。 詳しくは下記ドキュメントをご覧ください。
