Electron-웹뷰

webview 태그는 Electron 앱에 웹 페이지와 같은 '게스트'콘텐츠를 삽입하는 데 사용됩니다. 이 콘텐츠는 webview 컨테이너에 포함되어 있습니다. 앱에 포함 된 페이지는이 콘텐츠가 표시되는 방식을 제어합니다.

웹뷰는 앱과는 별도의 프로세스에서 실행됩니다. 악성 콘텐츠로부터 보안을 유지하기 위해 웹보기에는 웹 페이지와 동일한 권한이 없습니다. 이렇게하면 삽입 된 콘텐츠로부터 앱을 안전하게 보호 할 수 있습니다. 앱과 삽입 된 페이지 간의 모든 상호 작용은 비동기식입니다.

Electron 앱에 외부 웹 페이지가 삽입되는 것을 이해하는 예를 고려해 보겠습니다. 오른쪽에있는 앱에 tutorialspoint 웹 사이트를 삽입합니다. 새로 만들기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)

이제 기본 프로세스를 설정 했으므로 tutorialspoint 웹 사이트를 포함 할 HTML 파일을 만들어 보겠습니다. 다음 내용으로 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://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>

다음 명령을 사용하여 앱을 실행하십시오-