单击 Electron webview 中的元素答案

【问题标题】：Click on element in Electron webview单击 Electron webview 中的元素
【发布时间】：2018-06-13 14:03:47
【问题描述】：

我想在 Electron 中通过 webview 加载的远程网站中多次单击一个元素（按钮）。

当我在控制台中输入它（通过检查元素）时，以下工作：

a = setInterval( function(){
    var elem = document.getElementsByClassName("myclass");
    elem[0].click()
},1000)

当我在 Electron 主脚本中使用它时不会：

window.webContents.executeJavaScript('a = setInterval( function(){ var elem = document.getElementsByClassName("myclass"); elem[0].click() },1000)', true);

我收到一个错误：

未捕获的类型错误：无法在 :1:110 读取未定义的属性“点击”

我也尝试了 webview 标签中预加载的 scipt，但没有运气。

我错过了什么，或者做错了什么？

chromiumVersion: "58.0.3029.110"
electronVersion: "1.7.9"
nodeVersion:"7.9.0"

编辑

使用 Google.com 和搜索栏中的语音图标进行测试：

var element =  document.getElementsByClassName('gsst_a');
if (typeof(element) != 'undefined' && element != null) {
  console.log('yep, element is found');
  console.log(element);
  console.log(element[0]);
  a = setInterval(
    function(){
      var elem = document.getElementsByClassName("gsst_a");
      elem[0].click()
      },1000)
} else {
  console.log('nope, element is not found');
}

当进入控制台时，这会在 Chrome 中每 1 秒点击一次图标。

当我将 webview 设置为 Google.com 并具有以下行时，它仍然可以找到该元素，但再次出现前面提到的错误：

window.webContents.executeJavaScript('var element=document.getElementsByClassName("gsst_a");void 0!==element&&null!=element?(console.log("yep, element is found"),console.log(element),console.log(element[0]),a=setInterval(function(){document.getElementsByClassName("gsst_a")[0].click()},1e3)):console.log("nope, element is not found");', true);

console.log(element) 给出：HTMLCollection(0)

console.log(element[0]) 给出：undefined

为什么在我的普通浏览器中可以输入js，而在Electron webview中却不能？

【问题讨论】：

这个信息很难。你能尝试记录“elem”然后“elem[0]”，看看什么是未定义的元素。我认为这将是“elem”，但请尝试确定。
嘿@emish89 谢谢。我通过编辑更新了我的问题。
这意味着您的var element = document.getElementsByClassName('gsst_a'); 找不到任何元素
问题是，它应该只在找到元素时执行。您可以在 google.com 上的 Chrome 控制台中自己尝试扩展的 sn-p 吗？
你把你的脚本放在哪里了？将它放在 HTML 文件的末尾。

标签： javascript node.js webview electron

【解决方案1】：

回答我自己的问题。

该事件指的是 BrowserWindow 中的网页，而不是其中的 webview。所以该元素在我正在查看的范围内不存在，我需要在 BrowserWindow 中执行类似的操作。

代码：

<html>
<head>
  <style type="text/css">
    * { margin: 0; }
    #browserGoogle { height: 100%; }
  </style>
</head>
<body>
  <webview id="browserGoogle" src="https://google.com"></webview>
  <script>
    const browserView = document.getElementById('browserGoogle')
    browserView.addEventListener('dom-ready', () => {
      const browser = browserView.getWebContents()
      browser.setDevToolsWebContents(devtoolsView.getWebContents())
      browser.webContents.executeJavaScript('var element=document.getElementsByClassName("gsst_a");void 0!==element&&null!=element?(console.log("yep, element is found"),console.log(element),console.log(element[0]),a=setInterval(function(){document.getElementsByClassName("gsst_a")[0].click()},1e3)):console.log("nope, element is not found");', true);
    })
  </script>
</body>
</html>

【讨论】：