WebView class
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
host |
Contiene servidores proxy asincrónicos para todos los objetos host agregados a través Si llama a |
add |
Método estándar |
post |
Cuando la página llama a |
post |
Cuando la página llama a |
release |
Llame a con |
remove |
Método estándar |
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
.
hostObjects: HostObjectsAsyncRoot;
Valor de propiedad
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 sample
el 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;
});
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
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");
}
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);
});
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
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