## [**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) ```