WebView class
window.chrome.webview
は、WebView2 ランタイム内で実行されているスクリプトで使用できる WebView2 固有の API にアクセスするためのクラスです。
- Extends
プロパティ
host |
によって追加 ネイティブ コードで を呼び出す |
メソッド
add |
標準 |
post |
ページが を呼び出 |
post |
ページが を呼び出 |
release |
を イベントから |
remove |
標準 |
プロパティの詳細
hostObjects
によって追加 CoreWebView2.AddHostObjectToScript
されたすべてのホスト オブジェクトの非同期プロキシと、それらのプロキシを構成するためのオプション、および同期プロキシのコンテナーが含まれます。
ネイティブ コードで を呼び出すcoreWebView2.AddHostObjectToScript("myObject", object);
場合は、 を使用chrome.webview.hostObjects.myObject
して、 のobject
非同期プロキシを Web 側のコードで使用できます。
hostObjects: 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