📌  相关文章
📜  电子-Webview

📅  最后修改于: 2020-10-25 10:56:59             🧑  作者: Mango

webview标签用于将“访客”内容（例如网页）嵌入到Electron应用程序中。此内容包含在webview容器中。应用程序中的嵌入式页面控制如何显示此内容。

Webview在与您的应用程序不同的过程中运行。为了确保免受恶意内容侵害，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的文件，其内容如下：


      Menus
   
   
   
      

         

            
We have the website embedded below!

使用以下命令运行应用程序-

$ electron ./main.js

上面的命令将生成以下输出-

网页浏览

webview标记也可以用于其他资源。 webview元素在官方文档中列出了发出的事件列表。您可以使用这些事件来改进功能，具体取决于Web视图中发生的事情。

每当您从Internet嵌入脚本或其他资源时，建议使用webview。建议这样做，因为它具有很大的安全性优点，并且不会妨碍正常的行为。