Web Embeds | Electron
https://www.electronjs.org/docs/latest/tutorial/web-embeds • 41 KB fetched Open original page
Web Embeds | Electron tags, tags, and WebContentsView. Each one offers slightly different functionality and is useful in different situations. To help you choose between these, this guide explains the differences and capabilities of each option."/> tags, tags, and WebContentsView. Each one offers slightly different functionality and is useful in different situations. To help you choose between these, this guide explains the differences and capabilities of each option."/>
Skip to main content
Electron Docs API Blog Tools
* Electron Forge
* Electron Fiddle
Community
* Governance
* Showcase
* Resources
Releases English
* English
* Deutsch
* Español
* Français
* 日本語
* Português
* Русский
* 中文
Search
* Get Started
* Processes in Electron
* Best Practices
* Examples
* Dark Mode
* Device Access
* In-App Purchases
*
* Keyboard Shortcuts
* Deep Links
* Desktop Launcher Actions
*
* Menus
* Multithreading
* Native File Drag & Drop
* Navigation History
* Notifications
* Offscreen Rendering
* Online/Offline Event Detection
* Progress Bars
* Recent Documents
*
*
* Representing Files in a BrowserWindow
*
* SpellChecker
* Web Embeds
* Taskbar Customization
*
* Window Customization
* Development
* Native Node Modules
* Distribution
* Testing And Debugging
* References
* Contributing
*
* Examples
* Web Embeds On this page
Web Embeds
Overview
If you want to embed (third-party) web content in an Electron BrowserWindow ,
there are three options available to you: <iframe> tags, <webview> tags,
and WebContentsView . Each one offers slightly different functionality and is
useful in different situations. To help you choose between these, this guide
explains the differences and capabilities of each option.
Iframes
Iframes in Electron behave like iframes in regular browsers. An <iframe>
element in your page can show external web pages, provided that their
Content Security Policy
allows it. To limit the number of capabilities of a site in an <iframe> tag,
it is recommended to use the sandbox attribute
and only allow the capabilities you want to support.
WebViews
info
We do not recommend you to use WebViews ,
as this tag undergoes dramatic architectural changes that may affect stability
of your application. Consider switching to alternatives, like iframe and
Electron's WebContentsView , or an architecture
that avoids embedded content by design.
WebViews are based on Chromium's WebViews and are not
explicitly supported by Electron. We do not guarantee that the WebView API will
remain available in future versions of Electron. To use <webview> tags, you
will need to set webviewTag to true in the webPreferences of your
BrowserWindow .
WebView is a custom element ( <webview> ) that will only work inside Electron.
They are implemented as an "out-of-process iframe". This means that all
communication with the <webview> is done asynchronously using IPC. The
<webview> element has many custom methods and events, similar to
webContents , that provide you with greater control over the content.
Compared to an <iframe> , <webview> tends to be slightly slower but offers
much greater control in loading and communicating with the third-party content
and handling various events.
WebContentsView
WebContentsView s are not a part of the
DOM—instead, they are created, controlled, positioned, and sized by your
Main process. Using WebContentsView , you can combine and layer many pages
together in the same BaseWindow .
WebContentsView s offer the greatest control over their contents, since they
implement the webContents similarly to how BrowserWindow does it. However,
as WebContentsView s are not elements inside the DOM, positioning them
accurately with respect to DOM content requires coordination between the
Main and Renderer processes.
Edit this page
Previous
SpellChecker
Next
Taskbar Customization
* Overview
* Iframes
* WebViews
* WebContentsView
Docs
* Getting Started
* API Reference
Checklists
* Performance
* Security
Tools
* Electron Forge
* Electron Fiddle
Community
* Governance
* Resources
* Discord
* Bluesky
* X
* Mastodon
* Stack Overflow
More
* GitHub
* Open Collective
* Infrastructure Dashboard
Copyright OpenJS Foundation and Electron contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation , please see our Trademark Policy and Trademark List . Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. The OpenJS Foundation | Terms of Use | Privacy Policy | Bylaws | Code of Conduct | Trademark Policy | Trademark List | Cookie Policy
Hosting and infrastructure graciously provided by
Links found on this page
- Skip to main content [direct]
- Electron [direct]
- Docs [direct]
- API [direct]
- Blog [direct]
- Electron Forge [direct]
- Electron Fiddle [direct]
- Governance [direct]
- Showcase [direct]
- Resources [direct]
- Releases [direct]
- Deutsch [direct]
- Español [direct]
- Français [direct]
- 日本語 [direct]
- Português [direct]
- Русский [direct]
- 中文 [direct]
- Processes in Electron [direct]
- Best Practices [direct]
- Examples [direct]
- Dark Mode [direct]
- Device Access [direct]
- In-App Purchases [direct]
- Keyboard Shortcuts [direct]
- Deep Links [direct]
- Desktop Launcher Actions [direct]
- Menus [direct]
- Multithreading [direct]
- Native File Drag & Drop [direct]
- Navigation History [direct]
- Notifications [direct]
- Offscreen Rendering [direct]
- Online/Offline Event Detection [direct]
- Progress Bars [direct]
- Recent Documents [direct]
- Representing Files in a BrowserWindow [direct]
- SpellChecker [direct]
- Taskbar Customization [direct]
- Window Customization [direct]
- Development [direct]
- Native Node Modules [direct]
- Distribution [direct]
- Testing And Debugging [direct]
- References [direct]
- Contributing [direct]
- Content Security Policy [direct]
- sandbox attribute [direct]
- We do not recommend you to use WebViews [direct]
- WebContentsView [direct]
- BaseWindow [direct]
- Edit this page [direct]
- Security [direct]
- Discord [direct]
- Bluesky [direct]
- X [direct]
- Mastodon [direct]
- Stack Overflow [direct]
- GitHub [direct]
- Open Collective [direct]
- Infrastructure Dashboard [direct]
- OpenJS Foundation [direct]
- Trademark Policy [direct]
- Trademark List [direct]
- Terms of Use [direct]
- Privacy Policy [direct]
- Bylaws [direct]
- Code of Conduct [direct]
- Cookie Policy [direct]
|
|