## [**webview**](https://electronjs.org/docs/api/webview-tag) 在一個獨立的 frame 和進程里顯示外部 web 內容。 >[danger]當Electron >= 5。 在構造`BrowserWindow`時，需要通過設置`webviewTag`webPreferences選項來啟用標簽 用于非本地的遠程網頁，可以追加遠程網頁的css獲取事件、屬性等 渲染頁index.html ``` ... <webview id="foo" src="https://www.github.com/" style="display:inline-flex; width:640px; height:480px"></webview> ... ``` main.js ``` //在主入口文件main.js編寫代碼(main.js是主進程) //1 引入electron模塊 var electron=require('electron'); //2 創建electron引用 var app=electron.app; //3 創建 electron BrowserWindow的引用 var BrowserWindow = electron.BrowserWindow; //4 變量保存對應用窗口的引用 var mianWindow=null; //5 app.on('ready',function(){ //創建BrowserWindow的實例 賦值給win打開窗口 //軟件打開的的寬度和高度 mainWindow = new BrowserWindow({ width:800, height:600, webpreferences:{ webviewTag:true//必須為true才能啟用vebview } }); //mainWindow.loadFile('index.html');//把index.html加載到窗口里面，另一種方法如下: mainWindow.loadURL(require("path").join('file:',__dirname,'index.html')); //打開窗口時開啟調試模式 mainWindow.webContents.openDevTools(); //用戶關閉窗口時銷毀mianWindow mainWindow.on('closed',function(){ mainWindow=null; }) }) 然后命令行輸入(electron空格點) electron . ``` 渲染頁index.html ~~~ <div> <span id="loading"><span> <webview id="wb" src="https://www.github.com/" style="width:640px; height:480px"></webview> </div> ~~~ 渲染頁index.js ``` const wb=document.querySelect("#wb"); const loading=document.querySelect("#loading"); wb.addEventListener("did-stop-loading",function(){ loading.innerHTML="loading..."; }); wb.addEventListener("did-start-loading",function(){ loading.innerHTML="ok."; }); ``` **preload屬性可以嵌入腳本操作vebview的遠程頁面** 渲染頁index.html ``` <webview id="wb" src="https://www.baidu.com/" preload="./test.js"></webview> ```  渲染頁test.js ``` setTimeout(()=>{ var img_src=document.querySelect(".index-logo-src").src; alert(img_src); },5000) ```