WebView class

Referencia

Paquete:: WebView2Script

window.chrome.webview es la clase para acceder a las API específicas de WebView2 que están disponibles para el script que se ejecuta en tiempo de ejecución de WebView2.

Extends: EventTarget

Propiedades

hostObjects

Contiene servidores proxy asincrónicos para todos los objetos host agregados a través CoreWebView2.AddHostObjectToScript de , así como opciones para configurar esos servidores proxy y el contenedor para servidores proxy sincrónicos.

Si llama a coreWebView2.AddHostObjectToScript("myObject", object); en el código nativo, hay un proxy asincrónico para object disponible para el código del lado web, mediante chrome.webview.hostObjects.myObject.

Métodos

addEventListener(type, listener, options)	Método estándar `EventTarget.addEventListener` . Úselo para suscribirse al `message` evento o `sharedbufferreceived` evento. El `message` evento recibe mensajes publicados desde el host WebView2 a través `CoreWebView2.PostWebMessageAsJson` de o `CoreWebView2.PostWebMessageAsString`. El `sharedbufferreceived` evento recibe búferes compartidos publicados desde el host WebView2 a través de `CoreWebView2.PostSharedBufferToScript`. Vea CoreWebView2.PostWebMessageAsJson( Win32/C++, .NET, WinRT).
postMessage(message)	Cuando la página llama a `postMessage`, el `message` parámetro se convierte en JSON y se publica de forma asincrónica en el proceso de host de WebView2. Esto provocará que se produzca el `CoreWebView2.WebMessageReceived` evento o el `CoreWebView2Frame.WebMessageReceived` evento, en función de si `postMessage` se llama desde el documento de nivel superior en WebView2 o desde un marco secundario. Consulte CoreWebView2.WebMessageReceived( Win32/C++, .NET, WinRT). Vea CoreWebView2Frame.WebMessageReceived( Win32/C++, .NET, WinRT).
postMessageWithAdditionalObjects(message, additionalObjects)	Cuando la página llama a `postMessageWithAdditionalObjects`, el `message` parámetro se envía a WebView2 de la misma manera que "postMessage". Los objetos pasados como "additionalObjects" se convierten en sus tipos nativos y estarán disponibles en la `CoreWebView2WebMessageReceivedEventArgs.AdditionalObjects` propiedad .
releaseBuffer(buffer)	Llame a con `ArrayBuffer` desde el `chrome.webview.sharedbufferreceived` evento para liberar el recurso de memoria compartida subyacente.
removeEventListener(type, listener, options)	Método estándar `EventTarget.removeEventListener` . Úselo para cancelar la suscripción al `message` evento o `sharedbufferreceived` .

Detalles de las propiedades

hostObjects

hostObjects: HostObjectsAsyncRoot;

Valor de propiedad

HostObjectsAsyncRoot

Ejemplos

Por ejemplo, supongamos que tiene un objeto COM con la siguiente interfaz:

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

Agregue una instancia de esta interfaz a JavaScript con AddHostObjectToScript. En este caso, asígnele sampleel nombre .

En el código de la aplicación host nativa:

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

En el documento HTML, use el objeto COM mediante 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;
});

Detalles del método

addEventListener(type, listener, options)

Método estándar EventTarget.addEventListener . Úselo para suscribirse al message evento o sharedbufferreceived evento. El message evento recibe mensajes publicados desde el host WebView2 a través CoreWebView2.PostWebMessageAsJson de o CoreWebView2.PostWebMessageAsString. El sharedbufferreceived evento recibe búferes compartidos publicados desde el host WebView2 a través de CoreWebView2.PostSharedBufferToScript. Vea CoreWebView2.PostWebMessageAsJson( Win32/C++, .NET, WinRT).

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

Parámetros

type: string

Nombre del evento al que se va a suscribir. Los valores válidos son message, y sharedbufferreceived.

listener: EventListenerOrEventListenerObject

Devolución de llamada que se va a invocar cuando se genera el evento.

options: boolean | AddEventListenerOptions

Opciones para controlar cómo se controla el evento.

Devoluciones

void

postMessage(message)

Cuando la página llama a postMessage, el message parámetro se convierte en JSON y se publica de forma asincrónica en el proceso de host de WebView2. Esto provocará que se produzca el CoreWebView2.WebMessageReceived evento o el CoreWebView2Frame.WebMessageReceived evento, en función de si postMessage se llama desde el documento de nivel superior en WebView2 o desde un marco secundario. Consulte CoreWebView2.WebMessageReceived( Win32/C++, .NET, WinRT). Vea CoreWebView2Frame.WebMessageReceived( Win32/C++, .NET, WinRT).

postMessage(message: any) : void;

Parámetros

message: any

Mensaje que se va a enviar al host WebView2. Puede ser cualquier objeto que se pueda serializar en JSON.

Devoluciones

void

Comentarios

Ejemplos

Publique un mensaje en :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)

Cuando la página llama a postMessageWithAdditionalObjects, el message parámetro se envía a WebView2 de la misma manera que "postMessage". Los objetos pasados como "additionalObjects" se convierten en sus tipos nativos y estarán disponibles en la CoreWebView2WebMessageReceivedEventArgs.AdditionalObjects propiedad .

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

Parámetros

message: any

Mensaje que se va a enviar al host WebView2. Puede ser cualquier objeto que se pueda serializar en JSON.

additionalObjects: ArrayLike<any>

Secuencia de objetos DOM que tienen representaciones nativas en WebView2. Este parámetro debe ser ArrayLike. Los siguientes tipos DOM se asignan a nativos:

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

null o undefined las entradas se pasarán como null tipo en WebView2. De lo contrario, si se pasa un objeto no válido o no admitido a través de esta API, se producirá una excepción y el mensaje no se publicará.

Devoluciones

void

Comentarios

Ejemplos

Publique un mensaje que incluya objetos File de un elemento de entrada en 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)

Llame a con ArrayBuffer desde el chrome.webview.sharedbufferreceived evento para liberar el recurso de memoria compartida subyacente.

releaseBuffer(buffer: ArrayBuffer): void;

Parámetros

buffer: ArrayBuffer

de ArrayBuffer un elemento del chrome.webview.sharedbufferreceived evento.

Devoluciones

void

removeEventListener(type, listener, options)

Método estándar EventTarget.removeEventListener . Úselo para cancelar la suscripción al message evento o sharedbufferreceived .

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

Parámetros

type: string

Nombre del evento del que se va a cancelar la suscripción. Los valores válidos son message y sharedbufferreceived.

listener: EventListenerOrEventListenerObject

Devolución de llamada que se va a quitar del evento.

options: boolean | EventListenerOptions

Opciones para controlar cómo se controla el evento.

Devoluciones

void

Compartir a través de

WebView class

Propiedades

Métodos

Detalles de las propiedades

hostObjects

Valor de propiedad

Ejemplos

Detalles del método

addEventListener(type, listener, options)

Parámetros

Devoluciones

postMessage(message)

Parámetros

Devoluciones

Comentarios

Ejemplos

postMessageWithAdditionalObjects(message, additionalObjects)

Parámetros

Devoluciones

Comentarios

Ejemplos

releaseBuffer(buffer)

Parámetros

Devoluciones

removeEventListener(type, listener, options)

Parámetros

Devoluciones

Comentarios

Recursos adicionales