Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
323 views
in Technique[技术] by (71.8m points)

javascript - Access DOM in Electron BrowserView

How do you access the DOM of content loaded into a BrowserView?

I have a BrowserWindow and BrowserView defined like this (defined simply until I get it working):

let win = null
let view = null

// Create the window  
win = new BrowserWindow({
 height: 600,
 width: 800
})

// HTML file to load into window
win.loadFile('main.html')

// Create main browserView
view = new BrowserView()

// Set BrowserView bounds (usually in a function to handle window resize)
wb = win.getBounds()
view.setBounds({ x: 0, y: 0, width: wb.width, height: wb.height })

// Set BrowserView in window
win.setBrowserView(view)

// Load url in BrowserView
view.webContents.loadURL(url)

main.html is boiler-plate:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Testing</title>
  </head>
  <body>
    <script type="text/javascript" src="./renderer.js"></script>
  </body>
</html>

renderer.js is as well:

const { ipcRenderer } = require('electron')
const $ = require('jquery')

I can send input to the view like this (main.js):

view.webContents.sendInputEvent({type: 'keyDown', keyCode: 'space'})

I can listen for generic events in the view like this (main.js):

view.webContents.on('media-started-playing', () => {
 console.log('Playing')
})

But how do I access the DOM of the loaded URL in the BrowserView? I can find chapter and verse on the <webview> but that is a different animal. I found a question around renderer process differences between the BrowserView and <webview> that mentions that the BrowserView uses the same renderer process as the BrowserWindow but that doesn't make any sense to me as how would the BrowserView content know if there is no reference to it? For kicks I tried to change the background-color on a known div ID using an IPC channel from main to the renderer when the BrowserView content is finished loading and nothing happened. Even tied it to a button and nada which, again, is not surprising.

I feel like this must be a forrest for the trees scenario. I'm using Electron 11.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

You'll have to get this information via view.webContents.executeJavaScript("document.getElementById(...)").

The page is loaded in a separate renderer process, so you can't really just access that information from your main process, except via the executeJavaScript` API.

If you have control over the page, you could send down the appropriate information via IPC, though you won't be able to send down the the entire DOM Element over since it won't be serialized correctly as per here:

Cloning DOM nodes likewise throws a DATA_CLONE_ERR exception.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...