如何从 JavaScript 中滚动 <webview> 标签的内容

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

本文关键字：webview 标签 JavaScript 滚动      更新时间：2023-09-26
  • 原子壳：https://github.com/atom/atom-shell
  • 版本： v0.20.2

我正在使用<webview>标签来嵌入页面。 <webview>标签具有shadow-root，其中有一个标签，<object id="browser-plugin-1 ...> 。所以我尝试像这样为这个标签设置scrollTop值。

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

但是什么也没发生...
是否可以从外部控制<webview>标签滚动位置？

是的，请改为这样做：

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

可以通过WebView.executeJavaScript(code)函数执行任何类型的javascript，该函数将评估WebView中的代码。

要访问您的元素，您首先必须等待 WebView 加载，然后执行 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);
}

注意：尚未测试此代码，可能存在语法错误。

来源（AtomShell的WebView标签文档）

相关文章：