如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接信息。

苏南大叔又和大家见面了,本篇教程讲述的是electron的webview的最基本用法,以及如何处理webview的新开窗口问题。涉及文档页面URL见文章末尾。本文的主角代码是改造版的quick-start

webview 例子代码描述

从用法上来看,electron的webview和html的iframe,非常类似。但是webview的权限要比iframe要大,定制程度要比iframe更高。那么下面是个webview的例子。

main.js:(普通调用)

const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
const path = require('path')
const url = require('url')
//...
function createWindow(){
  //....
  mainWindow.loadURL(url.format({
     pathname: path.join(__dirname, 'index.html'),
     protocol: 'file:',
     slashes: true
  }));
  //...
}

index.html:(本文主角)

<webview id="foo" src="https://newsn.net/test.html" style="width:100%; height:360px;"></webview>

test.html:(龙套配角)

<a href="https://electron.org.cn" target="_blank">_blank</a>
<span onclick="javascript:window.open('https://electron.org.cn')">window.open</a>
<span onclick="javascript:window.showModalDialog('https://electron.org.cn')">window.showModalDialog</a>
<span onclick="javascript:window.showModelessDialog('https://electron.org.cn')">window.showModelessDialog</a>

在test.html中,我们定义了四种常见的新开窗口代码。分别是:

  • _blank
  • .open
  • .showModalDialog
  • .showModelessDialog

说明如下:

  • 在正常的浏览器中,这四种情况都是能新开窗口的。部分浏览器里面可能会拦截.open/.showModalDialog/.showModelessDialog。但是绝对没有任何浏览器会拦截_blank这种。
  • 在electron的webview中,对于_blank或者说非_self可能更合适,是默认拦截的!
  • 在electron的webview中,.open/.showModalDialog/.showModelessDialog, 是使用参数allowpopups 控制是否拦截的。

allowpopups控制.open/.showModalDialog/.showModelessDialog

下面的例子,是webview允许.open/.showModalDialog/.showModelessDialog的例子:

electron的index.html:(重点是参数allowpopups

<webview id="foo" src="https://newsn.net/test.html" allowpopups style="width:100%; height:360px;"></webview>

new-window事件控制_blank

下面的例子是:webview允许_blank页面的代码,代码位于:electron的index.html:

const {shell} = require('electron')
const webview = document.getElementById('foo')
webview.addEventListener('new-window', (e) => {
  const protocol = require('url').parse(e.url).protocol
  if (protocol === 'http:' || protocol === 'https:') {
    //shell.openExternal(e.url)
    window.open(e.url)
  }
});

electron的webview标签之新开窗口 - 000
electron的webview标签之新开窗口(图4-1)

new-window事件控制_blank新页面的处理方式

对于新开页面,一般有如下两种处理方式:

【方式1】:shell.openExternal(e.url),可以转为使用系统浏览器打开。

electron的webview标签之新开窗口 - 005
electron的webview标签之新开窗口(图4-2)

【方式2】:window.open(e.url),使用electron的窗口打开。【这个是最常见的代码情况】

注意这里的window.open和上文中的window.open,使用场景不同。所以后面的这个window.open不会被拦截。

electron的webview标签之新开窗口 - 004
electron的webview标签之新开窗口(图4-3)

对于webview的进一步理解

在开发者工具中,我们可以看到dom树里面的webiew。这个webview的标签确实是webview,而不是iframe。但是却和原始html里面的不一样。

从下面的截图中,我们可以看到,electron对webview标签做了特殊处理。上半部分是苏南大叔写的源码,而下半部分图是在electron中解析的结果。

electron的webview标签之新开窗口 - webview
electron的webview标签之新开窗口(图4-4)

总结

webview是一个可控性非常强的electron标签,本篇文章中仅仅介绍了它的新开页面相关的属性,请关注苏南大叔的后续相关文章: https://newsn.net/tag/webview/

本文相关electron相关api地址,如下:

apiurl
webviewhttps://electron.org.cn/doc/api/webview-tag.html
window.openhttps://electron.org.cn/doc/api/window-open.html
shellhttps://electron.org.cn/doc/api/shell.html

 【electron】秘籍文章入口,仅传授于有缘之人   electron    webview

本站的忠实读者小伙伴,正在阅读下面这些文章:

欢迎转载传播本篇原创文章,转载请保留链接及作者信息。
欢迎指正文字或逻辑错误,将会择优在文末列出您的信息。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

苏南大叔需要你的支持

感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!