Electron中實現通過webview實現內嵌網頁並嵌入css樣式和js腳本等

場景

用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...");
   
    //注入css
    wb.insertCSS(`
    .title-blog {
        background: red !important;
    }
    `)
    //注入js腳本
    wb.executeJavaScript(`
        setTimeout(()=>{
            alert("粉絲數："+document.querySelector('#fan').innerHTML);
        }, 2000);
    `)
    //打開調試工具
    wb.openDevTools();
})

 

運行項目看效果