相关文章推荐
深沉的刺猬  ·  Android ...·  3 周前    · 
道上混的紫菜汤  ·  Android ...·  3 周前    · 
开心的刺猬  ·  Android ...·  3 周前    · 
逆袭的鸭蛋  ·  若依 ruoyi-cloud ...·  4 月前    · 
曾经爱过的领结  ·  Quickstart - Get ...·  1 年前    · 
灰常酷的口罩  ·  Presto - Tableau·  1 年前    · 
奔跑的足球  ·  Spring ...·  1 年前    · 
年轻有为的鸵鸟  ·  文件通配 - .NET | ...·  1 年前    · 
host Objects

包含透過 新增 CoreWebView2.AddHostObjectToScript 之所有主機物件的非同步 Proxy,以及設定這些 Proxy 的選項,以及用於同步 Proxy 的容器。

如果您在原生程式碼中呼叫 coreWebView2.AddHostObjectToScript("myObject", object); ,則 Web 端程式碼可使用 chrome.webview.hostObjects.myObject 的異 object 步 Proxy。

add Event Listener(type, listener, options)

標準 EventTarget.addEventListener 方法。 使用它來訂閱 message 事件或 sharedbufferreceived 事件。 事件會 message 透過 或 CoreWebView2.PostWebMessageAsString 從 WebView2 主機 CoreWebView2.PostWebMessageAsJson 接收張貼的訊息。 此 sharedbufferreceived 事件會透過 接收從 WebView2 主機張貼的共用緩衝區 CoreWebView2.PostSharedBufferToScript 。 請參閱 CoreWebView2.PostWebMessageAsJson ( Win32/C++ .NET WinRT ) 。

post Message(message)

當頁面呼叫 postMessage 時, message 參數會轉換成 JSON,並以非同步方式張貼到 WebView2 主機進程。 這會導致 CoreWebView2.WebMessageReceived 事件或 CoreWebView2Frame.WebMessageReceived 事件引發,視 postMessage 是從 WebView2 中的最上層檔或從子框架呼叫而定。 請參閱 CoreWebView2.WebMessageReceived ( Win32/C++ .NET WinRT ) 。 請參閱 CoreWebView2Frame.WebMessageReceived ( Win32/C++ .NET WinRT ) 。

post Message With Additional Objects(message, additional Objects)

當頁面呼叫 postMessageWithAdditionalObjects 時, message 參數會以與 'postMessage' 相同的方式傳送至 WebView2。 當做 'additionalObjects' 傳遞的物件會轉換成其原生類型,並且可在 屬性中 CoreWebView2WebMessageReceivedEventArgs.AdditionalObjects 使用。

release Buffer(buffer)

從 事件呼叫 ArrayBuffer chrome.webview.sharedbufferreceived ,以釋放基礎共用記憶體資源。

remove Event Listener(type, listener, options)

標準 EventTarget.removeEventListener 方法。 使用它來取消訂閱 message sharedbufferreceived 事件。

包含透過 新增 CoreWebView2.AddHostObjectToScript 之所有主機物件的非同步 Proxy,以及設定這些 Proxy 的選項,以及用於同步 Proxy 的容器。

如果您在原生程式碼中呼叫 coreWebView2.AddHostObjectToScript("myObject", object); ,則 Web 端程式碼可使用 chrome.webview.hostObjects.myObject 的異 object 步 Proxy。

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

使用 將這個介面的實例 AddHostObjectToScript 新增至 JavaScript。 在此情況下,請將它命名為 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 檔案中,使用 chrome.webview.hostObjects.sample COM 物件。

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;
	

標準 EventTarget.addEventListener 方法。 使用它來訂閱 message 事件或 sharedbufferreceived 事件。 事件會 message 透過 或 CoreWebView2.PostWebMessageAsString 從 WebView2 主機 CoreWebView2.PostWebMessageAsJson 接收張貼的訊息。 此 sharedbufferreceived 事件會透過 接收從 WebView2 主機張貼的共用緩衝區 CoreWebView2.PostSharedBufferToScript 。 請參閱 CoreWebView2.PostWebMessageAsJson ( Win32/C++.NETWinRT) 。

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

string

要訂閱的事件名稱。 有效值為 message 、 和 sharedbufferreceived

listener

EventListenerOrEventListenerObject

引發事件時要叫用的回呼。

options

boolean | AddEventListenerOptions

控制事件處理方式的選項。

當頁面呼叫 postMessage 時, message 參數會轉換成 JSON,並以非同步方式張貼到 WebView2 主機進程。 這會導致 CoreWebView2.WebMessageReceived 事件或 CoreWebView2Frame.WebMessageReceived 事件引發,視 postMessage 是從 WebView2 中的最上層檔或從子框架呼叫而定。 請參閱 CoreWebView2.WebMessageReceived ( Win32/C++.NETWinRT) 。 請參閱 CoreWebView2Frame.WebMessageReceived ( Win32/C++.NETWinRT) 。

postMessage(message: any) : void;
message

要傳送至 WebView2 主機的訊息。 這可以是可序列化為 JSON 的任何物件。

將訊息張貼至 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 參數會以與 'postMessage' 相同的方式傳送至 WebView2。 當做 'additionalObjects' 傳遞的物件會轉換成其原生類型,並且可在 屬性中 CoreWebView2WebMessageReceivedEventArgs.AdditionalObjects 使用。

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

要傳送至 WebView2 主機的訊息。 這可以是可序列化為 JSON 的任何物件。

additionalObjects

ArrayLike<any>

在 WebView2 中具有原生標記法的 DOM 物件序列。 此參數必須是 ArrayLike。 下列 DOM 類型會對應至原生:

Win32 WinRT

將包含來自輸入元素之 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);
			
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;

string

要取消訂閱的事件名稱。 有效值為 messagesharedbufferreceived

listener

EventListenerOrEventListenerObject

要從事件中移除的回呼。

options

boolean | EventListenerOptions

控制事件處理方式的選項。