electron获取webview远程网址中的dom元素

小鱼儿 2022-02-03 11:59 851阅读 0赞

如获取csdn上的元素：`<webview id="foo" src="https://www.csdn.net/" autosize="on" minwidth="576" minheight="432" preload="./test.js"></webview>`  
**用preload，test.js**

const waitForExternal = setInterval(() => {
      if (document.querySelector('.btn')){
        clearInterval(waitForExternal);
        console.log(11111);
      }else{
        console.log('no');
      }
    }, 100);

**在应用index.html中使用（引入webview）**

<script>
       onload = function() {
         var webview = document.getElementById("foo");
         webview.addEventListener("dom-ready", function(){
           webview.openDevTools() // 这里！ 打开 webview的控制台
         });
       }
    </script>

**通过electron的executeJavascript方法**

mainWindow.webContents.on('dom-ready', () => {
      mainWindow.webContents
        .executeJavaScript(
          `
          const waitForExternal = setInterval(() => {
            if (document.querySelector('.btn')){
              clearInterval(waitForExternal);
              console.log(11111);
            }else{
              console.log('no');
            }
          }, 100);
          `,
          false,
          (result) =>
            console.log('webContents exec callback: ' + result)
        )
        .then((result) =>
          console.log('webContents exec then: ' + result)
        );
    });

**注意：webview内部还有iframe时**

// 获取iframe
    var frame =document.getElementById("iframeId");
    // 获取iframe document
    frame.contentWindow.document.getElementById("inputId");

发表评论取消回复

表情：

评论列表（有 0 条评论，851人围观）

还没有评论，来说两句吧...

相关阅读

相关原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法

用原生js在父页面获取iframe子页面的元素，以及在子页面获取父页面元素，这是平时经常会用到的方法，这里写一个例子来总结下： 1、父页面（demo.html），在父页面修改

我不是女神ヾ/ 2023年10月11日 15:28/ 0 赞/ 59 阅读

相关 DOM操作-获取元素的方式

DOM—文档对象模型 ●DOM（Document Object Model）：文档对象模型 ●其实就是操作 html 中的标签的一些能力 ●或者说是一整套操作文档

雨点打透心脏的1/2处/ 2023年09月27日 18:44/ 0 赞/ 112 阅读

相关 Vue.js中$refs{}获取DOM元素

如果我们想获取DOM元素，一般使用js中的`document.querySelector`来获取这个dom节点，然后在获取元素的值，现在Vue提供给我们一种更便捷的方式来获取D

以你之姓@/ 2022年12月22日 10:00/ 0 赞/ 315 阅读

相关获取Dom元素方式

1.document.getElementById(); 2.document.getElementsByName(); 3.document.getE

谁借莪１个温暖的怀抱￠/ 2022年06月05日 06:18/ 0 赞/ 305 阅读

相关使用electron中的webView标签

使用这个标签和正常写网页相似，在你的html文件中添加标签 <webview src="http://www.cityfoodmap.com:9091" autosi

灰太狼/ 2022年06月03日 04:20/ 0 赞/ 200 阅读

相关 DOM获取页面的元素

1. getElement系列访问通过DOM获取页面的元素的三种方式 Ø getElementById( )方法访问DOM元素 —》 id获取一个元素

比眉伴天荒/ 2022年05月24日 11:05/ 0 赞/ 315 阅读

相关 vue中获取并操作dom元素

获取dom元素可以使用 elementList = document.querySelectorAll(selectors);//获取多个dom元素如ul中的li

墨蓝/ 2022年05月21日 03:45/ 0 赞/ 262 阅读

相关 electron获取webview远程网址中的dom元素

如获取csdn上的元素：`<webview id="foo" src="https://www.csdn.net/" autosize="on" minwidth="576"

小鱼儿/ 2022年02月03日 11:59/ 0 赞/ 852 阅读

相关 HTML中获取Dom元素的方法

HTML中获取Dom元素的方法 1.getElementsByTagName()方法：获取标签，获取的值是一个数组形式；然后再通过数组下标来准确得到自己想要的值

亦凉/ 2022年01月27日 01:27/ 0 赞/ 676 阅读

相关 electron 标签webview

作用: 将网页内嵌到桌面客户端程序中，可以对引入的网页进行自定义操作,如注入脚本、css等用法: 在main.js中,webP

Dear 丶/ 2021年07月24日 12:34/ 0 赞/ 462 阅读