Тег <webview>
Предупреждение
Electron's webview
tag is based on Chromium's webview
, which is undergoing dramatic architectural changes. This impacts the stability of webviews
, including rendering, navigation, and event routing. We currently recommend to not use the webview
tag and to consider alternatives, like iframe
, a WebContentsView
, or an architecture that avoids embedded content altogether.
Enabling
By default the webview
tag is disabled in Electron >= 5. You need to enable the tag by setting the webviewTag
webPreferences option when constructing your BrowserWindow
. For more information see the BrowserWindow constructor docs.
Обзор
Display external web content in an isolated frame and process.
Process: Renderer
This class is not exported from the 'electron'
module. Он доступен только в качестве возвращаемого зн ачения других методов в Electron API.
Use the webview
tag to embed 'guest' content (such as web pages) in your Electron app. The guest content is contained within the webview
container. An embedded page within your app controls how the guest content is laid out and rendered.
Unlike an iframe
, the webview
runs in a separate process than your app. It doesn't have the same permissions as your web page and all interactions between your app and embedded content will be asynchronous. This keeps your app safe from the embedded content. Note: Most methods called on the webview from the host page require a synchronous call to the main process.
Пример
To embed a web page in your app, add the webview
tag to your app's embedder page (this is the app page that will display the guest content). In its simplest form, the webview
tag includes the src
of the web page and css styles that control the appearance of the webview
container:
<webview id="foo" src="https://www.github.com/" style="display:inline-flex; width:640px; height:480px"></webview>
If you want to control the guest content in any way, you can write JavaScript that listens for webview
events and responds to those events using the webview
methods. Here's sample code with two event listeners: one that listens for the web page to start loading, the other for the web page to stop loading, and displays a "loading..." message during the load time:
<script>
onload = () => {
const webview = document.querySelector('webview')
const indicator = document.querySelector('.indicator')
const loadstart = () => {
indicator.innerText = 'loading...'
}
const loadstop = () => {
indicator.innerText = ''
}
webview.addEventListener('did-start-loading', loadstart)
webview.addEventListener('did-stop-loading', loadstop)
}
</script>
Internal implementation
Under the hood webview
is implemented with Out-of-Process iframes (OOPIFs). The webview
tag is essentially a custom element using shadow DOM to wrap an iframe
element inside it.
So the behavior of webview
is very similar to a cross-domain iframe
, as examples:
- When clicking into a
webview
, the page focus will move from the embedder frame towebview
. - You can not add keyboard, mouse, and scroll event listeners to
webview
. - All reactions between the embedder frame and
webview
are asynchronous.