Thursday, February 16, 2017

Electron - Webview

The webview tag is used to embed 'guest' content like web pages in your Electron app. This content is contained within the webview container. An embedded page within your app controls how this content will be displayed.

The webview runs in a separate process than your app. To ensure security from malicious content, the webview doesn't have same permissions as your web page. This keeps your app safe from the embedded content. All interactions between your app and embedded page will be asynchronous.
Lets see an example of embedding an external webpage in pur electron app. We will embed the tutorialspoint website in our app on the right side. Create a new main.js file with the following content: 
const {app, BrowserWindow} = require('electron')
const url = require('url')
const path = require('path')

let win

function createWindow() {
   win = new BrowserWindow({width: 800, height: 600})
   win.loadURL(url.format({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true
   }))
}

app.on('ready', createWindow)
Now that we've setup our main process, lets create the HTML file that'll embed the tutorialspoint website. Create a file called index.html with the following content: 
<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Menus</title>
   </head>
   <body>
      <div>
         <div>
            <h2>We have the website embedded below!</h2>
         </div>
         <webview id="foo" src="https://www.tutorialspoint.com/" style="width:400px; height:480px;">
            <div class="indicator"></div>
         </webview>
      </div>
      <script type="text/javascript">
      // Event handlers for loading events.
      // Use these to handle loading screens, transitions, etc
      onload = () => {
         const webview = document.getElementById('foo')
         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>
   </body>
</html>
Run the app using: 
$ electron ./main.js
You should get the output:
Webview The webview tag can be used for other resources as well. The webview element has a list of event that it emits listed on the official docs. You can use these events to improve functionality depending on the things that take place in the webview.
Whenever you're embedding scripts or other resources from the internet, it is advisable to use webview. Doing so has great security benefits without hindering any normal behaviour.
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)