苏南大叔又和大家见面了,本篇教程讲述的是electronwebview的最基本用法,以及如何处理webview的新开窗口问题。涉及文档页面链接地址见文章末尾。文中解释了一个经常被问起的问题:为什么webview中的新窗口链接打不开,没反应的问题。

electron 的 webview 标签如何使用?如何控制新开窗口? - webview-new-windows
electron 的 webview 标签如何使用?如何控制新开窗口?(图4-1)

本文的主角代码是改造版的quick-start

webview 例子代码描述

从用法上来看,electronwebviewhtmliframe,非常类似。但是webview的权限要比iframe要大,定制程度要比iframe更高。但是,electron官方,是推荐大家使用iframe,而不是webview的。下面是个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="webview-test.html" style="width:100%; height:360px;"></webview>

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>

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

  • _blank
  • .open
  • .showModalDialog
  • .showModelessDialog

实际运行情况是:

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

webviewallowpopups属性

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

index.html:(重点是参数allowpopups

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

webview使用new-window事件控制_blank

代码范例

下面的例子是:webview允许_blank页面的代码,代码位于:electronindex.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 标签如何使用?如何控制新开窗口? - webview-code
electron 的 webview 标签如何使用?如何控制新开窗口?(图4-2)

代码说明

new-window事件控制_blank新页面的处理方式,对于新开页面,一般有如下两种处理方式:

electron 的 webview 标签如何使用?如何控制新开窗口? - 两种处理方式
electron 的 webview 标签如何使用?如何控制新开窗口?(图4-3)

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

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

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

f12webviewiframe的不同表现

在开发者工具中,我们可以看到dom树里面的webiew。这个webview标签确实是webview,而不是iframe。但是却和原始html里面的不一样。从下面的截图中,我们可以看到,electronwebview标签做了特殊处理,出现了一个很奇怪的object

electron 的 webview 标签如何使用?如何控制新开窗口? - webview-object
electron 的 webview 标签如何使用?如何控制新开窗口?(图4-4)

相关链接

本文相关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

总结

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

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

 【源码】本文代码片段及相关软件,请点此获取

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

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

本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

苏南大叔需要你的支持

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