javascript - Accessing the DOM from webview in atom Electron - Stack Overflow

admin管理员组

文章数量:1335438

Is it possible to scrape html from the webview element in the atom electron desktop development toolkit, I am trying to access the DOM but i get nothing back, i have tried a document.links in the console at runtime but i get empty properties and objects in return?

 window.onresize = doLayout;
 var isLoading = false;

onload = function() {
var webview = document.querySelector('webview');
doLayout();

var t = webview.executeJavaScript("console.log(document.links);");

document.querySelector('#back').onclick = function() {
webview.goBack();
};

<object is="browserplugin" type="application/browser-plugin" id="browser-plugin-1" style="flex: 1 1 auto;"></object>

Is it possible to scrape html from the webview element in the atom electron desktop development toolkit, I am trying to access the DOM but i get nothing back, i have tried a document.links in the console at runtime but i get empty properties and objects in return?

 window.onresize = doLayout;
 var isLoading = false;

onload = function() {
var webview = document.querySelector('webview');
doLayout();

var t = webview.executeJavaScript("console.log(document.links);");

document.querySelector('#back').onclick = function() {
webview.goBack();
};

<object is="browserplugin" type="application/browser-plugin" id="browser-plugin-1" style="flex: 1 1 auto;"></object>

• javascript
• node.js
• github
• electron
• atom-editor

Share Improve this question Follow edited Sep 27, 2016 at 13:19 Joe 31.1k1313 gold badges7373 silver badges9797 bronze badges asked Sep 14, 2016 at 17:01 apaulapaul 5111 silver badge33 bronze badges 6

• Can you post the code that you have tried so far? – ryder Commented Sep 14, 2016 at 17:07
• the value of t is displayed as undefined in the debugger – apaul Commented Sep 14, 2016 at 17:15
• 1 maybe it's a duplicate question, stackoverflow./questions/33523171/… – MaximeF Commented Sep 14, 2016 at 19:18
• so i should be trying either an iframe which is injected into the webview or an ipc request? right? – apaul Commented Sep 15, 2016 at 7:33
• I posted some markup which shows what is actually inside the webview tag, now there is a way of extracting html from the object but it is of type browser plugin, can anyone shed some light on this please? – apaul Commented Sep 15, 2016 at 7:51

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 7

Your console.log is logging to the webview's console, not your parent renderer process' console. Run document.querySelector('webview').openDevTools() from your parent renderer (after you have a src on the webview, it's additional methods aren't available until then). This will open another dev tools window. From that console, you should see your log. Note that webviews and the renderer hosting the webview are two separate webContents instances and two separate renderer processes. You can municate between them or the main process via IPC.

Not sure what your goals are, but if you want to do DOM manipulation in a webview, I'd remend using a preload script. This script gets run before the webview's JS and gives you access to all node.js and renderer electron APIs as well as the DOM. executeJavaScript is going to be a long difficult road, whereas preload scripts were built for this kind of use case.

Here's an example demonstrating 1) opening the devtools of a webview, 2) running a preload script in the webview's context that access the DOM, 3) municating between the parent renderer process and it's child webview process via IPC: https://github./ccnokes/electron-tutorials/tree/master/preload-scripts

本文标签： javascriptAccessing the DOM from webview in atom ElectronStack Overflow