webview标签

webview标签是electron中才有的html标签，使用 webview 标签来把 'guest' 内容（例如 web pages ）嵌入到你的 Electron app 中，guest的html内容包含在 webview 容器中。

与 iframe 不同，webview 和你的应用运行的是不同的进程，它不拥有渲染进程的权限，并且应用和嵌入内容之间的交互全部都是异步的，两个进程都是相互隔离的。

本篇主要讲electron中API文档没有的内容，webview的查找和窗口间的替换，还有webview的遮罩界面功能，本篇所用的眼神的页面结果如图所示，其中有两个窗口，分别加载index.html和web.html，在index.html中存在两个webview，而#web1又内嵌一个#web1的页面。

webview查找

• index.html页面内webview查找

var webview = document.getElementById('web2');

• index.html嵌套在webview中的子webview查找

var wvParent = document.getElementById('web1');
wvParent.getWebContents().findWebview('web1', function (webRef) {
    console.log(webRef);
});

• 查找web.html窗口内webview

//创建另外一个窗口，加载web.html页面
var win = new BrowserWindow({ width: 400, height: 300});        
win.loadURL('file://'+__dirname+'/web.html');
var webcontent = win.webContents;
webcontent.findWebview('web1',function(webRef){//在web.html页面查找id为web1的webview对象
   console.log(webRef);
}

页面内webview移动

var wv1 = document.getElementById('web1');//查找index.html页面的webview对象
wv1.appendToOtherNodeInPage(document.getElementById('div2'));
//使用appendToOtherNodeInPage方法移动到本页面的div2下

页面内webview替换

var wv1 = document.getElementById('web1');
var wv2 = document.getElementById('web2');
wv1 .transferTo(wv2);//用#web1替换#web2

页面间webview替换

var wv1= document.getElementById('web1');
var webcontent =win.webContents;
webcontent.findWebview('web1',function(webRef){//查找另外一个窗口的#web1对象
    wv1.transferTo(webRef);//替换
});

页面间webview替换完成事件

//在index.html上面监听atom_transfer_over，当index.html的#web1替换了本页面web.html中的#web1时触发
document.addEventListener('atom_transfer_over',function(){
alert('aa');},false);

webview遮罩界面

webview启动时候创建的等待界面实际上是里面创建了一个跟webview大小一样的iframe，在iframe里面加载了/resources/electron.asar/renderer/web-view/wait-webview.html页面；

当在webview的dom-ready事件触发了，也就是页面准备好了，此时删除了该遮罩iframe；

当webview在替换的时候，被替换的webview如果还有遮罩界面，此时也会删除该遮罩iframe。