WebView class

リファレンス

パッケージ:: WebView2Script

window.chrome.webview は、WebView2 ランタイム内で実行されているスクリプトで使用できる WebView2 固有の API にアクセスするためのクラスです。

Extends: EventTarget

プロパティ

によって追加 CoreWebView2.AddHostObjectToScript されたすべてのホストオブジェクトの非同期プロキシと、それらのプロキシを構成するためのオプション、および同期プロキシのコンテナーが含まれます。

ネイティブコードでを呼び出すcoreWebView2.AddHostObjectToScript("myObject", object);場合は、を使用chrome.webview.hostObjects.myObjectして、のobject非同期プロキシを Web 側のコードで使用できます。

メソッド

addEventListener(type, listener, options)	標準 `EventTarget.addEventListener` メソッド。これを使用して、イベントまたは`sharedbufferreceived`イベントを`message`サブスクライブします。イベントは`message`、または `CoreWebView2.PostWebMessageAsString`を介して WebView2 ホストから投稿されたメッセージを`CoreWebView2.PostWebMessageAsJson`受信します。イベントは `sharedbufferreceived` 、を介して WebView2 ホストからポストされた共有バッファーを `CoreWebView2.PostSharedBufferToScript`受け取ります。「CoreWebView2.PostWebMessageAsJson( Win32/C++、 .NET、 WinRT)」を参照してください。
postMessage(message)	ページがを呼び出 `postMessage`すと、 `message` パラメーターは JSON に変換され、WebView2 ホストプロセスに非同期的にポストされます。これにより、WebView2 の`CoreWebView2.WebMessageReceived`最上位ドキュメントまたは子フレームから呼び出されたかどうか`postMessage`に応じて、イベントまたは`CoreWebView2Frame.WebMessageReceived`イベントが発生します。「CoreWebView2.WebMessageReceived( Win32/C++、 .NET、 WinRT)」を参照してください。「CoreWebView2Frame.WebMessageReceived( Win32/C++、 .NET、 WinRT)」を参照してください。
postMessageWithAdditionalObjects(message, additionalObjects)	ページがを呼び出 `postMessageWithAdditionalObjects`すと、 `message` パラメーターは 'postMessage' と同じ方法で WebView2 に送信されます。 "additionalObjects" として渡されたオブジェクトは、ネイティブ型に変換され、プロパティで `CoreWebView2WebMessageReceivedEventArgs.AdditionalObjects` 使用できます。
releaseBuffer(buffer)	をイベントから `chrome.webview.sharedbufferreceived` 呼`ArrayBuffer`び出して、基になる共有メモリリソースを解放します。
removeEventListener(type, listener, options)	標準 `EventTarget.removeEventListener` メソッド。または `sharedbufferreceived` イベントの登録を解除する場合に`message`使用します。

プロパティの詳細

hostObjects

hostObjects: HostObjectsAsyncRoot;

プロパティ値

HostObjectsAsyncRoot

例

たとえば、次のインターフェイスを持つ COM オブジェクトがあるとします。

[uuid(3a14c9c0-bc3e-453f-a314-4ce4a0ec81d8), object, local]
interface IHostObjectSample : IUnknown
{
    // Demonstrate basic method call with some parameters and a return value.
    HRESULT MethodWithParametersAndReturnValue([in] BSTR stringParameter, [in] INT integerParameter, [out, retval] BSTR* stringResult);

    // Demonstrate getting and setting a property.
    [propget] HRESULT Property([out, retval] BSTR* stringResult);
    [propput] HRESULT Property([in] BSTR stringValue);

    [propget] HRESULT IndexedProperty(INT index, [out, retval] BSTR * stringResult);
    [propput] HRESULT IndexedProperty(INT index, [in] BSTR stringValue);

    // Demonstrate native calling back into JavaScript.
    HRESULT CallCallbackAsynchronously([in] IDispatch* callbackParameter);

    // Demonstrate a property which uses Date types
    [propget] HRESULT DateProperty([out, retval] DATE * dateResult);
    [propput] HRESULT DateProperty([in] DATE dateValue);

    // Creates a date object on the native side and sets the DateProperty to it.
    HRESULT CreateNativeDate();
};

を使用して、このインターフェイスのインスタンスを JavaScript AddHostObjectToScriptに追加します。この場合は、という名前を付けます sample。

ネイティブホストアプリコードで、次の手順を実行します。

VARIANT remoteObjectAsVariant = {};
m_hostObject.query_to<IDispatch>(&remoteObjectAsVariant.pdispVal);
remoteObjectAsVariant.vt = VT_DISPATCH;

// We can call AddHostObjectToScript multiple times in a row without // calling RemoveHostObject first. This will replace the previous object // with the new object. In our case, this is the same object, and everything // is fine.
CHECK_FAILURE(
    m_webView->AddHostObjectToScript(L"sample", &remoteObjectAsVariant));
remoteObjectAsVariant.pdispVal->Release();

HTML ドキュメントで、を使用して COM オブジェクトを使用 chrome.webview.hostObjects.sampleします。

document.getElementById("getPropertyAsyncButton").addEventListener("click", async () => {
    const propertyValue = await chrome.webview.hostObjects.sample.property;
    document.getElementById("getPropertyAsyncOutput").textContent = propertyValue;
});

document.getElementById("getPropertySyncButton").addEventListener("click", () => {
    const propertyValue = chrome.webview.hostObjects.sync.sample.property;
    document.getElementById("getPropertySyncOutput").textContent = propertyValue;
});

document.getElementById("setPropertyAsyncButton").addEventListener("click", async () => {
    const propertyValue = document.getElementById("setPropertyAsyncInput").value;
    // The following line will work but it will return immediately before the property value has actually been set.
    // If you need to set the property and wait for the property to change value, use the setHostProperty function.
    chrome.webview.hostObjects.sample.property = propertyValue;
    document.getElementById("setPropertyAsyncOutput").textContent = "Set";
});

document.getElementById("setPropertyExplicitAsyncButton").addEventListener("click", async () => {
    const propertyValue = document.getElementById("setPropertyExplicitAsyncInput").value;
    // If you care about waiting until the property has actually changed value, use the setHostProperty function.
    await chrome.webview.hostObjects.sample.setHostProperty("property", propertyValue);
    document.getElementById("setPropertyExplicitAsyncOutput").textContent = "Set";
});

document.getElementById("setPropertySyncButton").addEventListener("click", () => {
    const propertyValue = document.getElementById("setPropertySyncInput").value;
    chrome.webview.hostObjects.sync.sample.property = propertyValue;
    document.getElementById("setPropertySyncOutput").textContent = "Set";
});

document.getElementById("getIndexedPropertyAsyncButton").addEventListener("click", async () => {
    const index = parseInt(document.getElementById("getIndexedPropertyAsyncParam").value);
    const resultValue = await chrome.webview.hostObjects.sample.IndexedProperty[index];
    document.getElementById("getIndexedPropertyAsyncOutput").textContent = resultValue;
});
document.getElementById("setIndexedPropertyAsyncButton").addEventListener("click", async () => {
    const index = parseInt(document.getElementById("setIndexedPropertyAsyncParam1").value);
    const value = document.getElementById("setIndexedPropertyAsyncParam2").value;;
    chrome.webview.hostObjects.sample.IndexedProperty[index] = value;
    document.getElementById("setIndexedPropertyAsyncOutput").textContent = "Set";
});
document.getElementById("invokeMethodAsyncButton").addEventListener("click", async () => {
    const paramValue1 = document.getElementById("invokeMethodAsyncParam1").value;
    const paramValue2 = parseInt(document.getElementById("invokeMethodAsyncParam2").value);
    const resultValue = await chrome.webview.hostObjects.sample.MethodWithParametersAndReturnValue(paramValue1, paramValue2);
    document.getElementById("invokeMethodAsyncOutput").textContent = resultValue;
});

document.getElementById("invokeMethodSyncButton").addEventListener("click", () => {
    const paramValue1 = document.getElementById("invokeMethodSyncParam1").value;
    const paramValue2 = parseInt(document.getElementById("invokeMethodSyncParam2").value);
    const resultValue = chrome.webview.hostObjects.sync.sample.MethodWithParametersAndReturnValue(paramValue1, paramValue2);
    document.getElementById("invokeMethodSyncOutput").textContent = resultValue;
});

let callbackCount = 0;
document.getElementById("invokeCallbackButton").addEventListener("click", async () => {
    chrome.webview.hostObjects.sample.CallCallbackAsynchronously(() => {
        document.getElementById("invokeCallbackOutput").textContent = "Native object called the callback " + (++callbackCount) + " time(s).";
    });
});

// Date property
document.getElementById("setDateButton").addEventListener("click", () => {
    chrome.webview.hostObjects.options.shouldSerializeDates = true;
    chrome.webview.hostObjects.sync.sample.dateProperty = new Date();
    document.getElementById("dateOutput").textContent = "sample.dateProperty: " + chrome.webview.hostObjects.sync.sample.dateProperty;
});
document.getElementById("createRemoteDateButton").addEventListener("click", () => {
    chrome.webview.hostObjects.sync.sample.createNativeDate();
    document.getElementById("dateOutput").textContent = "sample.dateProperty: " + chrome.webview.hostObjects.sync.sample.dateProperty;
});

メソッドの詳細

addEventListener(type, listener, options)

標準 EventTarget.addEventListener メソッド。これを使用して、イベントまたはsharedbufferreceivedイベントをmessageサブスクライブします。イベントはmessage、または CoreWebView2.PostWebMessageAsStringを介して WebView2 ホストから投稿されたメッセージをCoreWebView2.PostWebMessageAsJson受信します。イベントは sharedbufferreceived 、を介して WebView2 ホストからポストされた共有バッファーを CoreWebView2.PostSharedBufferToScript受け取ります。「CoreWebView2.PostWebMessageAsJson( Win32/C++、 .NET、 WinRT)」を参照してください。

addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;

パラメーター

type: string

サブスクライブするイベントの名前。有効な値は、 message、および sharedbufferreceivedです。

listener: EventListenerOrEventListenerObject

イベントが発生したときに呼び出すコールバック。

options: boolean | AddEventListenerOptions

イベントの処理方法を制御するオプション。

戻り値

void

postMessage(message)

ページがを呼び出 postMessageすと、 message パラメーターは JSON に変換され、WebView2 ホストプロセスに非同期的にポストされます。これにより、WebView2 のCoreWebView2.WebMessageReceived最上位ドキュメントまたは子フレームから呼び出されたかどうかpostMessageに応じて、イベントまたはCoreWebView2Frame.WebMessageReceivedイベントが発生します。「CoreWebView2.WebMessageReceived( Win32/C++、 .NET、 WinRT)」を参照してください。「CoreWebView2Frame.WebMessageReceived( Win32/C++、 .NET、 WinRT)」を参照してください。

postMessage(message: any) : void;

パラメーター

message: any

WebView2 ホストに送信するメッセージ。これは、JSON にシリアル化できる任意のオブジェクトです。

戻り値

void

注釈

例

にメッセージを投稿します CoreWebView2。

const inTopLevelFrame = (window === window.parent);
if (inTopLevelFrame) {
    // The message can be any JSON serializable object.
    window.chrome.webview.postMessage({
        myMessage: 'Hello from the script!',
        otherValue: 1}
    );
    // A simple string is an example of a JSON serializable object.
    window.chrome.webview.postMessage("example");
}

postMessageWithAdditionalObjects(message, additionalObjects)

ページがを呼び出 postMessageWithAdditionalObjectsすと、 message パラメーターは 'postMessage' と同じ方法で WebView2 に送信されます。 "additionalObjects" として渡されたオブジェクトは、ネイティブ型に変換され、プロパティで CoreWebView2WebMessageReceivedEventArgs.AdditionalObjects 使用できます。

postMessageWithAdditionalObjects(message: any, additionalObjects: ArrayLike<any>) : void;

パラメーター

message: any

WebView2 ホストに送信するメッセージ。これは、JSON にシリアル化できる任意のオブジェクトです。

additionalObjects: ArrayLike<any>

WebView2 でネイティブ表現を持つ DOM オブジェクトのシーケンス。このパラメーターは ArrayLike である必要があります。次の DOM 型がネイティブにマップされます。

Dom	Win32	.NET	Winrt
ファイル	ICoreWebView2File	System.IO.FileInfo	Windows.Storage.StorageFile

null または undefined エントリは、WebView2 で型として null 渡されます。無効またはサポートされていないオブジェクトがこの API を介して渡された場合、例外がスローされ、メッセージはポストに失敗します。

戻り値

void

注釈

例

入力要素の File オブジェクトを含むメッセージを CoreWebView2 に投稿します。

const input = document.getElementById('files');
input.addEventListener('change', function() {
    // Note that postMessageWithAdditionalObjects does not accept a single object,
    // but only accepts an ArrayLike object.
    // However, input.files is type FileList, which is already an ArrayLike object so
    // no conversion to array is needed.
    const currentFiles = input.files;
    chrome.webview.postMessageWithAdditionalObjects("FilesDropped",
        currentFiles);
});

releaseBuffer(buffer)

をイベントから chrome.webview.sharedbufferreceived 呼ArrayBufferび出して、基になる共有メモリリソースを解放します。

releaseBuffer(buffer: ArrayBuffer): void;

パラメーター

buffer: ArrayBuffer

ArrayBufferイベントの chrome.webview.sharedbufferreceived 。

戻り値

void

removeEventListener(type, listener, options)

標準 EventTarget.removeEventListener メソッド。または sharedbufferreceived イベントの登録を解除する場合にmessage使用します。

removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;

パラメーター

type: string

登録を解除するイベントの名前。有効な値は message と sharedbufferreceivedです。

listener: EventListenerOrEventListenerObject

イベントから削除するコールバック。

options: boolean | EventListenerOptions

イベントの処理方法を制御するオプション。

戻り値

void

WebView class

プロパティ

メソッド

プロパティの詳細

hostObjects

プロパティ値

例

メソッドの詳細

addEventListener(type, listener, options)

パラメーター

戻り値

postMessage(message)

パラメーター

戻り値

注釈

例

postMessageWithAdditionalObjects(message, additionalObjects)

パラメーター

戻り値

注釈

例

releaseBuffer(buffer)

パラメーター

戻り値

removeEventListener(type, listener, options)

パラメーター

戻り値

フィードバック

その他のリソース