場景
用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();
})
運行項目看效果