次の方法で共有

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

  • [アーティクル]

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

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

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

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

関連項目:

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

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

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

関連項目:

  • WebView2 の機能と API の概要に関するページの iframe。

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

  • NavigationStarting
  • ContentLoading
  • HistoryChanged
  • DOMContentLoaded
  • NavigationCompleted

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

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

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

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

関連項目:

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

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

関連項目:

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

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

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

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

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

フレーム内の Web 側 JavaScript からネイティブ側オブジェクトにアクセスして制御するには、パラメーターを持つ (Win32) または CoreWebView2Frame.AddHostObjectToScript (.NET) をorigins使用AddHostObjectToScriptWithOriginsします。 パラメーターは 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 へのメッセージの送信

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

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 が含まれます。

関連項目

外部ページ: