CODEWITHSUNDEEP
javascriptcssnode.jswebviewelectron
Sjael
Sjael

Reputation: 31

Is it possible to change the styling of the contents of a webview?

I'm wanting to load a webview in my electron application and then adjust the styling of the object's contents. Whether by JS or CSS is irrelevant, I just want to be able to .hide() or visibility: none elements inside the webview.

Is this possible? It's proven difficult to discover. Thanks!

Upvotes: 2

Views: 599

Answers (1)

Matheus Teixeira
Matheus Teixeira

Reputation: 516

I'm assuming you are running the latest electron version, so based on webview documentation I guess you could try this:

Inserting CSS 

//Append CSS code do page
var myWebview = ;// your webview  definition
myWebview.insertCSS("body{background:#000}");

Or you could run a javascript code using executeJavascriptCode

var myWebview = ;// your webview  definition
myWebview.executeJavaScript("$('.mySelector').hide();");

But in both cases I suggest you to read file contents and pass it as function arguments or append your file your to your webview using executeJavascriptCode. Check the example below:

// appending javascript code 
var scriptPath = __dirname + '/path/to/script.js';
var myWebview  = ;// your webview  definition
myWebview.executeJavaScript('document.write(\'<script src="' + scriptPath + '"></script>\');');

// appending CSS code 
var cssPath   = __dirname + '/path/to/stylesheet.js';
var myWebview = ;// your webview  definition
myWebview.executeJavaScript('document.write(\'<link rel="stylesheet" type="text/css" href="' + cssPath + '">\');');

Hope it helps.

Good luck!

Upvotes: 1

Related Questions