場景

用HTML和CSS和JS構建跨平臺桌面應用程序的開源庫Electron的介紹以及搭建HelloWorld：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106413828

Electron怎樣進行渲染進程調試和使用瀏覽器和VSCode進行調試：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106414541

在上面搭建好項目以及知道怎樣進行調試后

如果要想將某些web網頁內嵌進來，類似于iframe的效果。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

顯示webview

首先在html中添加webview標簽

<div><webview id="wb" src="https://blog.csdn.net/BADAO_LIUMANG_QIZHI" /> </div>

直接通過src屬性設置要內嵌的網頁的地址。

然后打開main.js,設置支持webviewTag屬性為true

?

然后運行項目

?

preload屬性

preload屬性能夠在webview內所有腳本執行之前，先執行指定的腳本

在html中的webview標簽中

<webview id="wb" src="https://blog.csdn.net/BADAO_LIUMANG_QIZHI" preload="./js/preload.js"/>

添加preload屬性并指向指定的腳本

在preload.js中

setTimeout(()=>{alert("粉絲數："+document.querySelector('#fan').innerHTML); }, 5000);

設置五秒后獲取粉絲數，即通過id獲取span的內容

?

重新運行項目

?

注入CSS和JS腳本

在js中可以獲取到webview實例

const wb = document.querySelector('#wb');

然后通過設置其加載開始和加載完成的事件監聽器對其進行css和js的注入

//開始加載事件監聽 wb.addEventListener("did-start-loading", ()=> {console.log("did-start-loading...");}) //停止加載事件監聽 wb.addEventListener("did-stop-loading", ()=> {console.log("did-stop-loading...");//注入csswb.insertCSS(`.title-blog {background: red !important;}`)//注入js腳本wb.executeJavaScript(`setTimeout(()=>{alert("粉絲數："+document.querySelector('#fan').innerHTML);}, 2000);`)//打開調試工具wb.openDevTools(); })

運行項目看效果

?

總結

以上是生活随笔為你收集整理的Electron中实现通过webview实现内嵌网页并嵌入css样式和js脚本等的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。