Electron-Webview

webviewタグは、ElectronアプリにWebページのような「ゲスト」コンテンツを埋め込むために使用されます。このコンテンツは、webviewコンテナー内に含まれています。アプリ内の埋め込みページは、このコンテンツの表示方法を制御します。

WebViewは、アプリとは別のプロセスで実行されます。悪意のあるコンテンツからのセキュリティを確保するために、WebビューにはWebページと同じ権限がありません。これにより、埋め込みコンテンツからアプリを安全に保ちます。アプリと埋め込みページの間のすべての対話は非同期になります。

Electronアプリへの外部Webページの埋め込みを理解するための例を考えてみましょう。右側のアプリにfinddevguides Webサイトを埋め込みます。次の内容で新しい 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, 'indexl'),
      protocol: 'file:',
      slashes: true
   }))
}

app.on('ready', createWindow)

メインプロセスを設定したので、finddevguides Webサイトを埋め込むHTMLファイルを作成します。次の内容でindexlと呼ばれるファイルを作成します-

<!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.finddevguides.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>

次のコマンドを使用してアプリを実行します-

$ electron ./main.js

上記のコマンドは、次の出力を生成します-

Webview

webviewタグは、他のリソースにも使用できます。 webview要素には、公式ドキュメントにリストされているイベントのリストがあります。これらのイベントを使用して、Webビューで行われることに応じて機能を改善できます。

インターネットからスクリプトやその他のリソースを埋め込むときは、常にwebviewを使用することをお勧めします。これは、大きなセキュリティ上の利点があり、通常の動作を妨げないため、推奨されます。

Electron-webview

Electron-Webview