electron 中 webview的使用示例解析

正文

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

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

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

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

这是官网示列

src="https://**.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 页面

 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的值即可；根据自己的需求去做相关的操作即可

 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文件

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

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属性删除，然后根据下面的代码；就会在同窗口下实现跳转效果；

 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 = () => { 

data.webview.goBack(); 
}

下一页

 const forward = () => { 

data.webview.goForward(); 
}

以上就是今天的全部内容了；

以上就是electron 中 webview的使用示例详解的详细内容，更多关于electron webview使用的资料请关注其它相关文章！特别声明：

1、本站源于本人对中医中药的热爱，分享内容来源于朋友和网络转载，版权归相关权利人所有：文章所表达观点即代表作者个人观点，亦代表本人对文章的认同；我们尊重原创，分享的目的仅在于让更多的人了解中医及生命的奥秘。

2、如涉及版权问题，请及时联系我们，我们将立即改正和删除。