次の方法で共有

WebView2 アプリでのフレームの使用

  • [アーティクル]

フレームを使用すると、他の Web ページを独自の Web ページに埋め込むことができます。 フレームは、Web ページ内の Web ページのように、Web ページ内のサブページまたは領域です。

iframe は 1 種類のフレームです。 その他の種類のフレームには、 frameset、 portal、 embed、 fencedFrame、 objectがあります。 フレームのメイン WebView2 型はCoreWebView2Frameされ、現在最上位の iframe で有効になっています。 他の種類のフレームのサポートが計画されています。

WebView2 では、iframe と対話するための API がサポートされています。 次の操作を行うことができます:

  • iframe がいつ作成されているかを確認します。
  • iframe が別の URL に移動するタイミングを確認します。 これは、WebView2 アプリの状態コンピューターのナビゲーション イベントと同じように機能します。
  • ホスト アプリと iframe 間で通信し、双方向でメッセージを送信します。
  • X-Frame-Options HTTP 応答ヘッダーを無視するようにアプリに許可します。

関連項目:

FrameCreated イベントをサブスクライブしてフレームを取得する

ホスト アプリでフレームを操作するには、まず、ホスト アプリがフレーム オブジェクトを取得できるように、 FrameCreated イベントをサブスクライブします。 FrameCreated イベントは、新しいフレームが作成されるたびに発生します。 ホスト アプリがフレーム オブジェクトを取得したら、frame オブジェクトを使用して変更を監視し、この特定のフレームと対話します。

ホスト アプリは、 CoreWebView2Frame.Destroyed イベントをサブスクライブしてフレームの有効期間を監視する必要があります。これは、フレームが破棄されると、ホスト アプリがそのフレームを参照できなくなったためです。 フレームは、新しい Web ページナビゲーションのたびに作成され、破棄されます。 フレームがまだ存在するかどうかをチェックするには、CoreWebView2Frame.IsDestroyed メソッドを使用します。

関連項目:

  • WebView2 API の概要に関するページのiframes。

フレームが作成されると、フレームはフレームのソース URL に移動します。 iframe では、 FrameNavigationStarting や NavigationCompletedなどのナビゲーション イベントとナビゲーション イベントが使用されます。 フレームがソース URL に移動すると、次のナビゲーション イベントが発生します。

  • NavigationStarting
  • ContentLoading
  • HistoryChanged
  • DOMContentLoaded
  • NavigationCompleted

フレーム内を移動する頻度

ナビゲーションは、フレーム内で発生する可能性があります。 単純なユース ケースとして、 iframe 要素の source 属性は 、wikipedia.com などの URL であり、URL は iframe に読み込まれます。 通常、ナビゲーションはフレームが作成された直後に行われます。 その後、 ContentLoading、 DOMContentLoaded、および NavigationCompleted イベントが発生します。

フレーム自体が移動中です。 Web ページは URL に移動します。 同様に、フレームが移動する可能性があります。

フレームが作成されると、フレームはホスト アプリによって駆動されるように移動します。 メイン ページで何が起こっているかを監視するには、NavigationStarting、NavigationCompleted、HistoryChangedなどのイベントを使用して、ホスト アプリがフレームや Web ページ間を行き来できるようにします。 フレームは Web ページよりも頻繁に新しい URL に移動されますが、同じナビゲーション スタイルがサポートされています。 通常、ユーザーはフレーム内を移動できませんが、JavaScript では有効になります。通常、フレームはナビゲーションに関して静的です。

関連項目:

ナビゲーション イベント:

重複した同等のNavigationStartingイベントとNavigationCompletedイベントに関しては、CoreWebView2Frame型ではフレームとの対話を可能にするシナリオが増えるため、CoreWebView2で置き換えられる同等のイベントではなく、CoreWebView2Frameのイベントをお勧めします。

関連項目:

iframe でのホスト オブジェクトの使用

ホスト アプリのネイティブ側と iframe 内の JavaScript との間で通信するには、ホスト オブジェクトを使用します。 ホスト オブジェクトは、ホスト アプリで作成した後、アプリの Web ページ側の JavaScript コードから使用するオブジェクトです。

フレーム内のスクリプトからホスト オブジェクトを介してネイティブ側 API を使用することは、「Web 側コードからネイティブ側コードを呼び出す」で説明されているように、Web/ネイティブ相互運用ページ構造に似ています。

iframe 内でホスト オブジェクトを使用するには:

  1. ホスト オブジェクトを定義し、 IDispatchを実装します。
  2. AddHostObjectToScriptWithOrigins (Win32) または AddHostObjectToScript (.NET) を使用して、ネイティブ側にホスト オブジェクトを追加します。
  3. Web 側コードの JavaScript から、 chrome.webview.hostObjects.<name> API を使用してこのホスト オブジェクトにアクセスします。

フレーム内の Web 側 JavaScript からネイティブ側オブジェクトにアクセスして制御するには、origins パラメーターを持つ AddHostObjectToScriptWithOrigins (Win32) または CoreWebView2Frame.AddHostObjectToScript (.NET) を使用します。 origins パラメーターは、セキュリティ上の理由から、アクセスを許可する URL iframe を指定します。 このパラメーターは、iframe がホスト オブジェクトにアクセスできる URL を識別します。

フレームが origins リストにない URL に移動した場合、フレームはホスト オブジェクトを操作できません。フレームはプロパティの読み取りまたは書き込みを行うことはできません。 フレームワークの AddHostObjectToScript メソッドのメソッド名テーブルを参照してください。 次の 2 つの行を参照してください。

  • applyHostFunction、 getHostProperty、および setHostProperty。
  • getLocalProperty および getLocalProperty。

上記のメソッドは、次のメソッドのように動作します。

  • CoreWebView2.AddHostObjectToScript メソッド。 メソッド名の表を参照してください。 これらの両方の API リファレンス トピックをお読みくださいが、フレームの場合は、代わりに origins パラメーターをサポートする メソッドを使用します。

コード例

「 手順 6: AddHostObjectToScript を呼び出してホスト オブジェクトを Web 側のコードに渡す 」を参照してください。「Web 側コード からネイティブ側コードを呼び出す」を参照してください。

関連項目:

メッセージの送受信

メッセージは、iframe 内のネイティブ アプリと JavaScript コードの間で送信できます。

  • HTML ページの iframe 内の JavaScript からホスト アプリにメッセージを送信できます。
  • ホスト アプリから HTML ページの iframe で JavaScript にメッセージを送信できます。

iframe からホスト アプリへの Web メッセージの送信

iframe からホスト アプリに Web メッセージを送信するには、 window.chrome.webview.postMessage メソッドを使用します。

window.chrome.webview.postMessage(`SetTitleText ${titleText.value}`);

ホスト アプリでこれらのメッセージを受信するには、ホスト アプリが WebMessageReceived eventをサブスクライブする必要があります。

ホスト アプリから iframe へのメッセージの送信

ホスト アプリは、 PostWebMessageAsJson または PostWebMessageAsString メソッドを呼び出して、iframe にメッセージを送信します。

iframe は、次のように、 window.chrome.webview.addEventListener('message') イベントをサブスクライブしてメッセージを受信します。

window.chrome.webview.addEventListener('message', arg => {
    // implement event listener here
});

関連項目:

ExecuteScript を使用して iframe で JavaScript コードを実行する

WebView2 アプリは、 ExecuteScriptを使用して、フレーム内の任意の JavaScript を実行できます。

スクリプトを iframe で実行するには、実行コンテキストを作成する必要があります。 実行コンテキストは、ContentLoading イベントの後に作成されます。そのため、ContentLoading イベントが発生する前にExecuteScriptが呼び出されると、スクリプトは実行されず、文字列nullが返されます。

ContentLoading イベントの詳細については、「WebView2 アプリのナビゲーション イベント」を参照してください。これは、フレームと Web ページに対して有効です。

関連項目:

iframe で WebResourceRequested イベントを使用してネットワーク イベントを変更する

この機能は試験的です

iframe の場合は、 WebResourceRequested イベントを使用して、ネットワーク イベントをリッスンし、変更できます。

関連項目:

最新のプレリリース API を参照してください。 次のリンクには、 1.0.1466-prereleaseが含まれています。 API リファレンス ドキュメントの左上にある [ バージョン ] ドロップダウン リストで、最新のプレリリースを選択します。

X-Frame-Options を無視してフレーム内に Web ページをレンダリングする

X-Frame-Options HTTP 応答ヘッダーは、アプリケーションがフレーム内でその Web ページをレンダリングできないようにするために Web ページによって使用されます。 AdditionalAllowedFrameAncestors プロパティを使用すると、アプリケーションで X-Frame-Options ヘッダーをバイパスして、Web ページをフレーム内にレンダリングできます。

関連項目:

ホスト アプリでの iframe の使用例

このサンプル コードでは、次のようなフレーム API を使用する方法を示します。

  • FrameCreated
    • CoreWebView2FrameCreatedEventArgs
  • DOMContentLoaded
    • CoreWebView2DOMContentLoadedEventArgs
  • ExecuteScript

このサンプル コードは、WebView2WpfBrowser サンプルのMainWindow.xaml.csから要約されています。

        void DOMContentLoadedCmdExecuted(object target, ExecutedRoutedEventArgs e)
        {
            // Subscribe to the FrameCreated event to obtain the frame object when 
            // it's created.
            webView.CoreWebView2.FrameCreated += WebView_FrameCreatedDOMContentLoaded;
            webView.NavigateToString(@"<!DOCTYPE html>" +
                                      "<h1>DOMContentLoaded sample page</h1>" +
                                      "<h2>The content to the iframe and below will be added after DOM content is loaded </h2>" +
                                      "<iframe style='height: 200px; width: 100%;'/>");
        }

        void WebView_FrameCreatedDOMContentLoaded(object sender, CoreWebView2FrameCreatedEventArgs args)
        {
            // In order for ExecuteScriptAsync to successfully run inside the iframe, 
            // subscribe to the ContentLoading or DOMContentLoaded event.  Once these 
            // events are raised, you can call ExecuteScriptAsync.
            args.Frame.DOMContentLoaded += (frameSender, DOMContentLoadedArgs) =>
            {
                args.Frame.ExecuteScriptAsync(
                    "let content = document.createElement(\"h2\");" +
                    "content.style.color = 'blue';" +
                    "content.textContent = \"This text was added to the iframe by the host app\";" +
                    "document.body.appendChild(content);");
            };
        }

API リファレンスの概要

WebView2 API の概要に記載されている次の機能には、フレーム関連の API が含まれます。

関連項目

外部ページ: