WebView class

參考

套件:: WebView2Script

window.chrome.webview 是用來存取 WebView2 特定 API 的類別，可供在 WebView2 運行時間內執行的腳本使用。

Extends: EventTarget

屬性

包含透過新增 CoreWebView2.AddHostObjectToScript 之所有主機對象的異步 Proxy，以及設定這些 Proxy 的選項，以及用於同步 Proxy 的容器。

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

方法

addEventListener(type, listener, options)	標準 `EventTarget.addEventListener` 方法。使用它來訂閱 `message` 事件或 `sharedbufferreceived` 事件。事件會`message`透過或 `CoreWebView2.PostWebMessageAsString`從 WebView2 主機`CoreWebView2.PostWebMessageAsJson`接收張貼的訊息。此 `sharedbufferreceived` 事件會透過接收從 WebView2 主機張貼的共用緩衝區 `CoreWebView2.PostSharedBufferToScript`。請參閱 CoreWebView2.PostWebMessageAsJson ( Win32/C++、 .NET、 WinRT) 。
postMessage(message)	當頁面呼叫 `postMessage`時， `message` 參數會轉換成 JSON，並以異步方式張貼到 WebView2 主機進程。這會導致 `CoreWebView2.WebMessageReceived` 事件或 `CoreWebView2Frame.WebMessageReceived` 事件引發，視 `postMessage` 是從 WebView2 中的最上層檔或從子框架呼叫而定。請參閱 CoreWebView2.WebMessageReceived ( Win32/C++、 .NET、 WinRT) 。請參閱 CoreWebView2Frame.WebMessageReceived ( Win32/C++、 .NET、 WinRT) 。
postMessageWithAdditionalObjects(message, additionalObjects)	當頁面呼叫 `postMessageWithAdditionalObjects`時， `message` 參數會以與 'postMessage' 相同的方式傳送至 WebView2。當做 'additionalObjects' 傳遞的物件會轉換成其原生類型，並且可在屬性中 `CoreWebView2WebMessageReceivedEventArgs.AdditionalObjects` 使用。
releaseBuffer(buffer)	從事件呼叫 `ArrayBufferchrome.webview.sharedbufferreceived` ，以釋放基礎共用記憶體資源。
removeEventListener(type, listener, options)	標準 `EventTarget.removeEventListener` 方法。使用它來取消訂閱 `message` 或 `sharedbufferreceived` 事件。

屬性詳細資料

hostObjects

包含透過新增 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.sampleCOM 物件。

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 方法。使用它來訂閱 message 事件或 sharedbufferreceived 事件。事件會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 主機進程。這會導致 CoreWebView2.WebMessageReceived 事件或 CoreWebView2Frame.WebMessageReceived 事件引發，視 postMessage 是從 WebView2 中的最上層檔或從子框架呼叫而定。請參閱 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)

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

releaseBuffer(buffer: ArrayBuffer): void;

參數

buffer: ArrayBuffer

從 ArrayBuffer 事件的 chrome.webview.sharedbufferreceived 。

傳回

void

removeEventListener(type, listener, options)

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

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

參數

type: string

要取消訂閱的事件名稱。有效值為 message 與 sharedbufferreceived。

listener: EventListenerOrEventListenerObject

要從事件中移除的回呼。

options: boolean | EventListenerOptions

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

傳回

void

共用方式為

WebView class

屬性

方法

屬性詳細資料

hostObjects

屬性值

範例

方法詳細資料

addEventListener(type, listener, options)

參數

傳回

postMessage(message)

參數

傳回

備註

範例

postMessageWithAdditionalObjects(message, additionalObjects)

參數

傳回

備註

範例

releaseBuffer(buffer)

參數

傳回

removeEventListener(type, listener, options)

參數

傳回

意見反應

其他資源