Webview در الکترون – آموزش Electron

پنجشنبه ۱۸ بهمن ۱۳۹۷
بازدید ۱,۵۵۲ نفر
آرتین
(5 امتیاز از 1 رای)
Loading...

تصویر electron-webview_5833 Webview در الکترون - آموزش Electron

Webview در الکترون

با استفاده از تگ Webview می توانید محتوای صفحات وب را در برنامه الکترون نمایش دهید. یک صفحه جاساز شده (embedded) نحوه نمایش محتوا را کنترل می کند. webview در یک فرآیند جداگانه اجرا می شود و برای اطمینان از امنیت و جلوگیری از اجرا شدن محتوای مخرب، webview به صفحه ای که در آن استفاده شده است، دسترسی ندارد. این موضوع برنامه شما را از خطر کدهای مخرب جاساز شده در امان نگه می دارد. تمامی تعاملات بین صفحه جاساز شده و برنامه به صورت ناهمگام (Asynchronous) صورت می گیرد.

برای درک بهتر این موضوع یک مثال ساده ایجاد خواهیم کرد که محتوای سایت سورس سرا را در داخل خود نمایش می دهد.

یک فایل جدید با نام main.js ایجاد کرده و محتوای زیر را در آن بنویسید:

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)

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)

یک فایل دیگر به نام index.html ایجاد کرده و محتوای زیر را در آن بنویسید:

<!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://sourcesara.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>

<!DOCTYPE html>

<html>

<head>

<title>Menus</title>

</head>

<body>

<div>

<h2>We have the website embedded below!</h2>

</div>

<webview id = "foo" src = "https://sourcesara.com/" style =

"width:400px; height:480px;">

</webview>

</div>

// 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>

برنامه را با استفاده از دستور زیر اجرا کنید:

$ electron ./main.js

1	$ electron ./main.js

بعد از اجرای دستور بالا محتوای سایت مورد نظر شما در بخشی از صفحه به نمایش در خواهد آمد.

شما می توانید از تگ WebView برای نمایش منابع دیگری نیز استفاده کنید. این تگ شامل لیستی از رویداد های مختلف است که می توانید برای اهداف مختلف از آن ها استفاده کنید.

الکترون - ضبط صدا و تصویر الکترون - اعلان ها (Notifications)