CODEWITHSUNDEEP
javascriptwebviewelectron
snufkon
snufkon

Reputation: 301

How can I scroll content of <webview> tag from JavaScript?

I am using <webview> tag to embed a page. <webview> tag has shadow-root which has one tag, <object id="browser-plugin-1 ...>. So I tried to set scrollTop value for this tag like this.

var webView = document.getElementById('webview tag id');
var elm = webView.shadowRoot.firstChild; // elm is object tag
console.log(elm.scrollTop);  // 0
elm.scrollTop = 100;
console.log(elm.scrollTop);  // 0

But nothing happend...
Is it possible to control <webview> tag scroll position from outside?

Upvotes: 6

Views: 2882

Answers (2)

undefined
undefined

Reputation: 4135

It's possible to execute any kind of javascript via the WebView.executeJavaScript(code) function which will evaluate the code inside the WebView.

To access your element you would first have to wait for the WebView to load, and then execute the javascript.

var webView = document.getElementById('webView');
webView.addEventListener('did-finish-load', scrollElement );

function scrollElement(){
    var code = "var elm = document.querySelector('body:first-child'); elm.scrollTop = 100;";
    webView.executeJavaScript(code);
}

Note: Haven't tested this code, it may have syntax errors.

Source (AtomShell's WebView tag documentation)

Upvotes: 0

Ana Betts
Ana Betts

Reputation: 74652

Yes, do this instead:

var webView = document.getElementById('webview tag id');
webView.executeJavaScript("document.querySelector('body:first-child').scrollTop=100");

Upvotes: 4

Related Questions