正文
webview 想必都有所了解,比如:微信小程序嵌套H5
那么我们在electron中怎么使用webview呢?
我们先跟着官方文档展示一下,看是否能有效果;
若要在应用程序中嵌入网页, 请将 webview 标签添加到应用程序的被嵌入页面中 (这是将显示外来内容的应用程序页)。 在最简单的例子中, webview 标签包括网页的 src 和控制 webview 容器外观的 css 样式:
这是官网示列
1
2
3
4
|
<webview id= "foo" src= "https://www.electronjs.org/zh/docs/latest/api/webview-tag#%E7%A4%BA%E4%BE%8B" style= "display:inline-flex; width:750px; height:calc(100vh - 5px)" > </webview> |
展示效果:
既然我们现在能展示了,说明没得问题正常使用的没得问题的,那么我们就需要了解一些我们在工作中可能会遇到的场景
- 获取webview的dom
- 监听页面对否显示
- 禁止打开新窗口
- 刷新页面
- 上一页
- 下一页
获取webview的dom
先创建一个窗口,子窗口;可以看这篇文章会讲述怎么创建新窗口
electron创建新窗口(模态框)并相互传值,主进程传值给子进程
webview 页面
1
2
3
4
5
6
7
8
9
10
11
|
< 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的值即可;根据自己的需求去做相关的操作即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
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文件
主要是获取页面的一些标签,也可以根据相关类名获取
1
2
3
4
5
6
|
// 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属性删除,然后根据下面的代码;就会在同窗口下实现跳转效果;
1
2
3
4
5
6
7
|
data.webview.addEventListener( 'new-window' ,(e)=>{ const urlClass = new URL(e.url); const { protocol } = urlClass; if (protocol === "http:" || protocol === "https:" ) { ata.url = e.url; } }) |
刷新页面
可以刷新当前页面
1
2
3
4
|
// 刷新页面 const refresh = () => { data.webview.reload(); } |
上一页
当我们点击了文章以后,想返回上一页的时候可以使用
1
2
3
4
|
// 上一页 const back = () => { data.webview.goBack(); } |
下一页
1
2
3
4
|
// 下一页 const forward = () => { data.webview.goForward(); } |
以上就是今天的全部内容了;
以上就是electron 中 webview的使用示例详解的详细内容,更多关于electron webview使用的资料请关注服务器之家其它相关文章!
原文链接:https://juejin.cn/post/7200673854863622203