electron的webView通信和如何在Electron中使用webView打开网页并获取DOM元素

如何在Elec t ron中使用webView打开 网页并获取DOM元素

Elec t ron是一个基于Ch ro m ium和No de.js的开源框架，用于构建跨平台的桌面应用程序。其中，Elect ron的webView是用来嵌入网页的组件。在本文中，我们将介绍如何使用Elect ron的webView打开网页并获取DOM元素的值。

步骤1：创建Elect ron应用

首先，我们需要创建一个Elect ron应用。在命令行中，使用以下命令创建一个新的Elec t ron应用：

mkdir my-electron-app
cd my-electron-app
npm init -y
npm i --save electron

在创建完毕后，您可以在package.json 文件中看到Elec tr on的依赖项。

步骤2：创建并配置webView

在Elec tr on中，webView是一个嵌入式的浏览器窗口，用于在Elec tr on应用程序中显示网页。我们可以在Elec tr on的主进程中创建webView，并将其嵌入到应用程序中。在我们的示例中，我们将创建一个webView实例并将其添加到Elec tr on窗口中。在您的Elec t r on应用程序中，打开 main.js文件，然后添加以下代码：

const { app, BrowserWindow } = require('electron')
let win

function createWindow () {
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      webviewTag: true
    }
  })

  win.loadFile('index.html')

  const webview = document.createElement('webview')
  webview.src = '&lt;https://www.google.com&gt;'
  webview.addEventListener('dom-ready', () =&gt; {
    webview.executeJavaScript(`alert(document.title)`)
  })

  win.webContents.on('did-finish-load', () =&gt; {
    win.webContents.executeJavaScript(`
      const webview = document.querySelector('webview')
      webview.addEventListener('dom-ready', () =&gt; {
        webview.executeJavaScript(\`
          const body = document.querySelector('body')
          const p = document.createElement('p')
          p.innerText = 'Hello from Electron'
          body.appendChild(p)
        \`)
      })
    `)
  })

  win.on('closed', () => {
    win = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (win === null) {
    createWindow()
  }
})

在上面的代码中，我们创建了一个新的Brow serWindow实例，并将其加载到我们的Electron应用程序中。然后，我们使用document.createElement()方法创建了一个新的webView元素，并将其嵌入到我们的Electron窗口中。接下来，我们监听了webView的’dom–read y’事件，该事件在webView加载完毕后会触发。在事件处理程序中，我们使用webView.executeJa vaScri pt()方法获取了网页的标题。

步骤3：获取DOM元素的值

要获取DOM元素的值，我们需要在webView的’dom–ready’事件处理程序中编写代码。在我们的示例中，我们将使用querySelector()方法选择要获取值的元素，然后使用innerText 属性获取其文本值。在您的Electron应用程序中，打开 main.js文件，然后将以下代码添加到webView的’dom–ready’事件处理程序中：

const webview = document.querySelector('webview')
webview.addEventListener('dom-ready', () => {
  webview.executeJavaScript(`
    const element = document.querySelector('h1')
    alert(element.innerText)
  `)
})

在上面的代码中，我们使用querySelector()方法选择了网页中的h1元素，并使用innerText 属性获取了其文本值。接下来，我们使用alert()方法将文本值弹出。

步骤4：运行应用程序并测试

在完成了上述步骤之后，我们现在可以运行Electron应用程序并测试它是否能够正常工作。在命令行中，运行以下命令以启动您的Electron应用程序：

npm start

在Electron应用程序中，您应该可以看到我们嵌入的webView窗口，其中显示了Google的网页。当网页加载完毕后，应用程序应该会弹出一个包含网页标题的警告框。接下来，当您点击警告框时，应用程序应该会弹出一个包含网页标题的警告框。

结论

在本文中，我们介绍了如何使用Electron的webView打开网页并获取DOM元素的值。我们首先创建了一个Electron应用程序，然后创建了一个webView实例并将其嵌入到我们的应用程序中。接下来，我们监听了webView的’dom–re ady’事件，并使用executeJavaScript()方法获取了网页的标题。最后，我们介绍了如何使用que rySelector()方法选择DOM元素并使用innerText 属性获取其文本值。希望这篇文章能够对您有所帮助！