cap-overlay-webview

The plugin is for Capacitor 6

Capacitor webview plugin. Overlays webview above the app. Allows displaying multiple webviews, show/hide/remove them, set their sizes and control some of their functions

Install

npm install cap-overlay-webview
npx cap sync

API

• addWebView(...)
• showWebView(...)
• hideWebView(...)
• removeWebView(...)
• setWebViewSize(...)
• canGoBack(...)
• canGoForward(...)
• goBack(...)
• goForward(...)
• reload(...)
• captureScreenshot(...)
• openUrl(...)
• addListener(WebViewEvent, ...)
• removeListener(...)
• bringMainWebViewToFront()
• sendMainWebViewToBack()
• executeJavaScript(...)
• Interfaces
• Type Aliases

addWebView(...)

addWebView(options: AddWebViewOptions) => Promise<{ message: string; }>

Add a new WebView with a given ID and URL.

| Param | Type | Description | | ------------- | --------------------------------------------------------------- | -------------------------------- | | options | AddWebViewOptions | - WebView configuration options. |

Returns: Promise<{ message: string; }>

showWebView(...)

showWebView(options: WebViewIdOptions) => Promise<{ message: string; }>

Show a WebView by its ID.

| Param | Type | Description | | ------------- | ------------------------------------------------------------- | ------------- | | options | WebViewIdOptions | - WebView ID. |

Returns: Promise<{ message: string; }>

hideWebView(...)

hideWebView(options: WebViewIdOptions) => Promise<{ message: string; }>

Hide a WebView by its ID.

| Param | Type | Description | | ------------- | ------------------------------------------------------------- | ------------- | | options | WebViewIdOptions | - WebView ID. |

Returns: Promise<{ message: string; }>

removeWebView(...)

removeWebView(options: WebViewIdOptions) => Promise<{ message: string; }>

Remove a WebView by its ID.

| Param | Type | Description | | ------------- | ------------------------------------------------------------- | ------------- | | options | WebViewIdOptions | - WebView ID. |

Returns: Promise<{ message: string; }>

setWebViewSize(...)

setWebViewSize(options: SetWebViewSizeOptions) => Promise<{ message: string; }>

Set the WebView size, adjusting top and bottom insets.

| Param | Type | Description | | ------------- | ----------------------------------------------------------------------- | ----------------------------- | | options | SetWebViewSizeOptions | - WebView ID and size insets. |

Returns: Promise<{ message: string; }>

canGoBack(...)

canGoBack(options: WebViewIdOptions) => Promise<{ canGoBack: boolean; }>

Check if a WebView can go back in history.

| Param | Type | Description | | ------------- | ------------------------------------------------------------- | ------------- | | options | WebViewIdOptions | - WebView ID. |

Returns: Promise<{ canGoBack: boolean; }>

canGoForward(...)

canGoForward(options: WebViewIdOptions) => Promise<{ canGoForward: boolean; }>

Check if a WebView can go forward in history.

| Param | Type | Description | | ------------- | ------------------------------------------------------------- | ------------- | | options | WebViewIdOptions | - WebView ID. |

Returns: Promise<{ canGoForward: boolean; }>

goBack(...)

goBack(options: WebViewIdOptions) => Promise<{ message: string; }>

Navigate back in a WebView.

| Param | Type | Description | | ------------- | ------------------------------------------------------------- | ------------- | | options | WebViewIdOptions | - WebView ID. |

Returns: Promise<{ message: string; }>

goForward(...)

goForward(options: WebViewIdOptions) => Promise<{ message: string; }>

Navigate forward in a WebView.

| Param | Type | Description | | ------------- | ------------------------------------------------------------- | ------------- | | options | WebViewIdOptions | - WebView ID. |

Returns: Promise<{ message: string; }>

reload(...)

reload(options: WebViewIdOptions) => Promise<{ message: string; }>

Reload the WebView.

| Param | Type | Description | | ------------- | ------------------------------------------------------------- | ------------- | | options | WebViewIdOptions | - WebView ID. |

Returns: Promise<{ message: string; }>

captureScreenshot(...)

captureScreenshot(options: WebViewIdOptions) => Promise<{ screenshot: string; }>

Capture a screenshot of the WebView.

| Param | Type | Description | | ------------- | ------------------------------------------------------------- | ------------- | | options | WebViewIdOptions | - WebView ID. |

Returns: Promise<{ screenshot: string; }>

openUrl(...)

openUrl(options: OpenUrlOptions) => Promise<void>

Open a URL using the system (e.g. Safari or external app). Gives user a system selector if there are multiple apps to choose from.

| Param | Type | Description | | ------------- | --------------------------------------------------------- | -------------- | | options | OpenUrlOptions | - URL to open. |

addListener(WebViewEvent, ...)

addListener(event: WebViewEvent, listener: (data: WebViewEventData) => void) => Promise<PluginListenerHandle>

Listen for WebView load events.

| Param | Type | Description | | -------------- | -------------------------------------------------------------------------------- | ---------------------------------------------------------------- | | event | WebViewEvent | - "webViewLoaded", "webViewFailedToLoad", or "webViewUrlChange". | | listener | (data: WebViewEventData) => void | - Callback function. |

Returns: Promise<PluginListenerHandle>

removeListener(...)

removeListener(event: WebViewEvent, listener: (data: WebViewEventData) => void) => Promise<void>

Remove a listener for WebView events.

| Param | Type | Description | | -------------- | -------------------------------------------------------------------------------- | ------------------------------ | | event | WebViewEvent | - Event name. | | listener | (data: WebViewEventData) => void | - Callback function reference. |

bringMainWebViewToFront()

bringMainWebViewToFront() => Promise<void>

Cover the overlay webview with the app webview.

sendMainWebViewToBack()

sendMainWebViewToBack() => Promise<void>

Cover the main webview with the overlay webview.

executeJavaScript(...)

executeJavaScript(options: ExecuteJavaScriptOptions) => Promise<{ result: any; }>

Execute JavaScript in a WebView.

| Param | Type | Description | | ------------- | ----------------------------------------------------------------------------- | ------------------------------- | | options | ExecuteJavaScriptOptions | - JavaScript execution options. |

Returns: Promise<{ result: any; }>

Interfaces

AddWebViewOptions

Options for adding a WebView.

| Prop | Type | | ----------------- | -------------------- | | id | string | | hidden | boolean | | transparent | boolean | | alwaysOnTop | boolean | | url | string | | js | string |

WebViewIdOptions

Options for specifying a WebView by ID.

| Prop | Type | | -------- | ------------------- | | id | string |

SetWebViewSizeOptions

Options for setting WebView size with insets.

| Prop | Type | | ----------------- | ------------------- | | id | string | | topInset | number | | bottomInset | number | | height | number |

OpenUrlOptions

Options for opening a URL with another app.

| Prop | Type | | --------- | ------------------- | | url | string |

PluginListenerHandle

| Prop | Type | | ------------ | ----------------------------------------- | | remove | () => Promise<void> |

WebViewEventData

Event data structure for WebView events.

| Prop | Type | | ------------- | ------------------- | | id | string | | message | string | | error | string | | url | string | | newUrl | string | | title | string |

ExecuteJavaScriptOptions

| Prop | Type | | -------- | ------------------- | | id | string | | js | string |

Type Aliases

WebViewEvent

Possible WebView events.

"webViewMessage" | "webViewLoaded" | "webViewFailedToLoad" | "webViewUrlChange"