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

Posted 2023-03-22

【中文标题】如何从 JavaScript 滚动 <webview> 标签的内容？

【英文标题】：How can I scroll content of <webview> tag from JavaScript?

【发布时间】：2015-02-26 12:39:50

【问题描述】：

原子壳：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>标签滚动位置？

【参考方案1】：

是的，改为这样做：

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

【讨论】：

谢谢，@paul。我可以这样控制webView.executeJavaScript("document.querySelector('body').scrollTop=100;");

【参考方案2】：

可以通过 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);

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

Source (AtomShell's WebView tag documentation)