WebView class

Referenz

Paket:: WebView2Script

window.chrome.webview ist die Klasse für den Zugriff auf die WebView2-spezifischen APIs, die für das Skript verfügbar sind, das in WebView2 Runtime ausgeführt wird.

Extends: EventTarget

Eigenschaften

hostObjects

Enthält asynchrone Proxys für alle über hinzugefügten CoreWebView2.AddHostObjectToScript Hostobjekte sowie Optionen zum Konfigurieren dieser Proxys und den Container für synchrone Proxys.

Wenn Sie in Ihrem nativen Code aufrufencoreWebView2.AddHostObjectToScript("myObject", object);, steht mithilfe von chrome.webview.hostObjects.myObjectein asynchroner Proxy für object für Ihren webseitigen Code zur Verfügung.

Methoden

addEventListener(type, listener, options)	Die Standardmethode `EventTarget.addEventListener` . Verwenden Sie es, um das Ereignis oder `sharedbufferreceived` das `message` Ereignis zu abonnieren. Das `message` Ereignis empfängt Nachrichten, die vom WebView2-Host über `CoreWebView2.PostWebMessageAsJson` oder `CoreWebView2.PostWebMessageAsString`gesendet werden. Das `sharedbufferreceived` Ereignis empfängt freigegebene Puffer, die vom WebView2-Host über `CoreWebView2.PostSharedBufferToScript`gepostet werden. Siehe CoreWebView2.PostWebMessageAsJson( Win32/C++, .NET, WinRT).
postMessage(message)	Wenn die Seite aufruft `postMessage`, wird der `message` Parameter in JSON konvertiert und asynchron an den WebView2-Hostprozess gesendet. Dies führt dazu, dass entweder das `CoreWebView2.WebMessageReceived` -Ereignis oder das `CoreWebView2Frame.WebMessageReceived` -Ereignis ausgelöst wird, je nachdem, ob `postMessage` aus dem Dokument der obersten Ebene in der WebView2 oder aus einem untergeordneten Frame aufgerufen wird. Siehe CoreWebView2.WebMessageReceived( Win32/C++, .NET, WinRT). Siehe CoreWebView2Frame.WebMessageReceived( Win32/C++, .NET, WinRT).
postMessageWithAdditionalObjects(message, additionalObjects)	Wenn die Seite aufruft `postMessageWithAdditionalObjects`, wird der `message` Parameter auf die gleiche Weise wie "postMessage" an WebView2 gesendet. Objekte, die als "additionalObjects" übergeben werden, werden in ihre nativen Typen konvertiert und sind in der `CoreWebView2WebMessageReceivedEventArgs.AdditionalObjects` -Eigenschaft verfügbar.
releaseBuffer(buffer)	Rufen Sie mit dem `ArrayBuffer` aus dem `chrome.webview.sharedbufferreceived` -Ereignis auf, um die zugrunde liegende freigegebene Speicherressource freizugeben.
removeEventListener(type, listener, options)	Die Standardmethode `EventTarget.removeEventListener` . Verwenden Sie es, um das - oder `sharedbufferreceived` -`message`Ereignis abzubestellen.

Details zur Eigenschaft

hostObjects

Enthält asynchrone Proxys für alle über hinzugefügten CoreWebView2.AddHostObjectToScript Hostobjekte sowie Optionen zum Konfigurieren dieser Proxys und den Container für synchrone Proxys.

hostObjects: HostObjectsAsyncRoot;

Eigenschaftswert

HostObjectsAsyncRoot

Beispiele

Angenommen, Sie verfügen über ein COM-Objekt mit der folgenden Schnittstelle:

[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();
};

Fügen Sie ihrem JavaScript mit AddHostObjectToScripteine instance dieser Schnittstelle hinzu. Nennen Sie ihn samplein diesem Fall .

Im Code der nativen Host-App:

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();

Verwenden Sie im HTML-Dokument das COM-Objekt mit 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;
});

Details zur Methode

addEventListener(type, listener, options)

Die Standardmethode EventTarget.addEventListener . Verwenden Sie es, um das Ereignis oder sharedbufferreceived das message Ereignis zu abonnieren. Das message Ereignis empfängt Nachrichten, die vom WebView2-Host über CoreWebView2.PostWebMessageAsJson oder CoreWebView2.PostWebMessageAsStringgesendet werden. Das sharedbufferreceived Ereignis empfängt freigegebene Puffer, die vom WebView2-Host über CoreWebView2.PostSharedBufferToScriptgepostet werden. Siehe CoreWebView2.PostWebMessageAsJson( Win32/C++, .NET, WinRT).

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

Parameter

type: string

Der Name des zu abonnierenden Ereignisses. Gültige Werte sind message, und sharedbufferreceived.

listener: EventListenerOrEventListenerObject

Der Rückruf, der aufgerufen werden soll, wenn das Ereignis ausgelöst wird.

options: boolean | AddEventListenerOptions

Optionen zum Steuern der Behandlung des Ereignisses.

Gibt zurück

void

postMessage(message)

Wenn die Seite aufruft postMessage, wird der message Parameter in JSON konvertiert und asynchron an den WebView2-Hostprozess gesendet. Dies führt dazu, dass entweder das CoreWebView2.WebMessageReceived -Ereignis oder das CoreWebView2Frame.WebMessageReceived -Ereignis ausgelöst wird, je nachdem, ob postMessage aus dem Dokument der obersten Ebene in der WebView2 oder aus einem untergeordneten Frame aufgerufen wird. Siehe CoreWebView2.WebMessageReceived( Win32/C++, .NET, WinRT). Siehe CoreWebView2Frame.WebMessageReceived( Win32/C++, .NET, WinRT).

postMessage(message: any) : void;

Parameter

message: any

Die Nachricht, die an den WebView2-Host gesendet werden soll. Dies kann ein beliebiges Objekt sein, das in JSON serialisiert werden kann.

Gibt zurück

void

Hinweise

Beispiele

Senden Sie eine Nachricht an :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)

Wenn die Seite aufruft postMessageWithAdditionalObjects, wird der message Parameter auf die gleiche Weise wie "postMessage" an WebView2 gesendet. Objekte, die als "additionalObjects" übergeben werden, werden in ihre nativen Typen konvertiert und sind in der CoreWebView2WebMessageReceivedEventArgs.AdditionalObjects -Eigenschaft verfügbar.

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

Parameter

message: any

Die Nachricht, die an den WebView2-Host gesendet werden soll. Dies kann ein beliebiges Objekt sein, das in JSON serialisiert werden kann.

additionalObjects: ArrayLike<any>

Eine Sequenz von DOM-Objekten, die über native Darstellungen in WebView2 verfügen. Dieser Parameter muss ArrayLike sein. Die folgenden DOM-Typen werden nativ zugeordnet:

DOM	Win32	.NET	WinRT
Datei	ICoreWebView2File	System.IO.FileInfo	Windows.Storage.StorageFile

null - oder undefined -Einträge werden als null Typ in WebView2 übergeben. Wenn andernfalls ein ungültiges oder nicht unterstütztes Objekt über diese API übergeben wird, wird eine Ausnahme ausgelöst, und die Nachricht kann nicht gesendet werden.

Gibt zurück

void

Hinweise

Beispiele

Posten Sie eine Nachricht, die File-Objekte aus einem Eingabeelement enthält, in 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)

Rufen Sie mit dem ArrayBuffer aus dem chrome.webview.sharedbufferreceived -Ereignis auf, um die zugrunde liegende freigegebene Speicherressource freizugeben.

releaseBuffer(buffer: ArrayBuffer): void;

Parameter

buffer: ArrayBuffer

Ein ArrayBuffer aus dem chrome.webview.sharedbufferreceived -Ereignis.

Gibt zurück

void

removeEventListener(type, listener, options)

Die Standardmethode EventTarget.removeEventListener . Verwenden Sie es, um das - oder sharedbufferreceived -messageEreignis abzubestellen.

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

Parameter

type: string

Der Name des Ereignisses, von dem das Abonnement abgemeldet werden soll. Gültige Werte sind message und sharedbufferreceived.

listener: EventListenerOrEventListenerObject

Der Rückruf, der aus dem Ereignis entfernt werden soll.

options: boolean | EventListenerOptions

Optionen zum Steuern der Behandlung des Ereignisses.

Gibt zurück

void

Freigeben über

WebView class

Eigenschaften

Methoden

Details zur Eigenschaft

hostObjects

Eigenschaftswert

Beispiele

Details zur Methode

addEventListener(type, listener, options)

Parameter

Gibt zurück

postMessage(message)

Parameter

Gibt zurück

Hinweise

Beispiele

postMessageWithAdditionalObjects(message, additionalObjects)

Parameter

Gibt zurück

Hinweise

Beispiele

releaseBuffer(buffer)

Parameter

Gibt zurück

removeEventListener(type, listener, options)

Parameter

Gibt zurück

Feedback

Zusätzliche Ressourcen