亲宝软件园·资讯

展开

electron 中 webview的使用示例解析

雾恋 人气:0

正文

webview 想必都有所了解,比如:微信小程序嵌套H5

那么我们在electron中怎么使用webview呢?

我们先跟着官方文档展示一下,看是否能有效果;

若要在应用程序中嵌入网页, 请将 webview 标签添加到应用程序的被嵌入页面中 (这是将显示外来内容的应用程序页)。 在最简单的例子中, webview 标签包括网页的 src 和控制 webview 容器外观的 css 样式:

这是官网示列

<webview id="foo" 
    src="https://www.electronjs.org/zh/docs/latest/api/webview-tag" 
    style="display:inline-flex; width:750px; height:calc(100vh - 5px)">
</webview>

展示效果:

既然我们现在能展示了,说明没得问题正常使用的没得问题的,那么我们就需要了解一些我们在工作中可能会遇到的场景

获取webview的dom

先创建一个窗口,子窗口;可以看这篇文章会讲述怎么创建新窗口

electron创建新窗口(模态框)并相互传值,主进程传值给子进程

webview 页面

<webview id="foo"
      autosize="on"
      allowpopups
      :src="url"
      :data-home="url"
      scrollbars="none"
      partition="modal-webview"
      :preload="preloadPath"
      style="display:inline-flex; width:750px; height:calc(100vh - 5px)">
    
</webview>

webview页面的代码

在webview标签中设置:preload="preloadPath";然后返回相关dom字符串,并且在addEventListener中去监听参数是否返回;

这儿的时候大家可以灵活运用,比较是依靠原生去获取dom上的值,如果你直接获取某个标签的值的话,你直接获取标签的text的值即可;根据自己的需求去做相关的操作即可

    const preloadPath = computed(()=>{
      return path.join(__static, "/preload.js");
    })
    onMounted(() => {
        nextTick(()=>{
            // 获取webview的dom 
          data.webview = document.querySelector("#foo");
            // 监听页面是否渲染完成
          data.webview.addEventListener("did-finish-load", (e) => {
            data.webview.addEventListener("ipc-message", async (event) => {
              console.log(event); // 获取参数
              if (event.channel == 'foo-html-content') {
                const html = event.args[0]; // 获取的dom
                console.log(html);
              }
            })
            // 通知获取webview并返回参数,这个主要是preload.js里面的东西
            data.webview.send("foo");
          })
        })
    })

新建public/preload.js文件

主要是获取页面的一些标签,也可以根据相关类名获取

// public/preload.js
const { ipcRenderer } = require("electron");
ipcRenderer.on('foo',() => {
    const htmlContent = document.querySelector("html").innerHTML;
    ipcRenderer.sendToHost("foo-html-content", htmlContent);
})

这样就可以获取到webview展示内容的dom标签了

监听页面对否显示

以下是addEventListener的一些方法:

1.did-start-loading 页面开始加载

2.load-commit 主页面文档加载

3.page-title-updated title

4.dom-ready 主页面 dom 加载完成

5.load-commit frame文档加载

6.did-frame-finish-load frame 加载完成

7.did-frame-finish-load 最后一个是主框架frame 加载完成

8.did-finish-load 页面加载完成

9.page-favicon-updated 网页 icon

10.did-stop-loading 页面停止加载

禁止打开新窗口

我们在使用掘金的过程中,点击文章时他会打开一个新的窗口; 原因是设置的allowpopups属性;但是将allowpopups改为false时,点击文章会没效果;所以需要将allowpopups属性删除,然后根据下面的代码;就会在同窗口下实现跳转效果;

data.webview.addEventListener('new-window',(e)=>{
    const urlClass = new URL(e.url);
    const { protocol } = urlClass;
    if (protocol === "http:" || protocol === "https:") {
      ata.url = e.url;
    }
})

刷新页面

可以刷新当前页面

// 刷新页面
    const refresh = () => {
      data.webview.reload();
    }

上一页

当我们点击了文章以后,想返回上一页的时候可以使用

// 上一页
    const back = () =&gt; {
      data.webview.goBack();
    }

下一页

// 下一页
    const forward = () => {
      data.webview.goForward();
    }

加载全部内容

相关教程
猜你喜欢
用户评论