Merge pull request #8421 from oukan/feature/translate-zh-CN
translate zh cn
This commit is contained in:
Kevin Sawicki
GitHub
commit
651ea7ef02
8 changed files with 686 additions and 361 deletions
|
|
@ -1,13 +1,15 @@
|
|||
# 支持的 Chrome 命令行开关
|
||||
|
||||
这页列出了Chrome浏览器和Electron支持的命令行开关. 你也可以在[app][app]模块的[ready][ready]事件发出之前使用[app.commandLine.appendSwitch][append-switch] 来添加它们到你应用的main脚本里面:
|
||||
> Electron 支持的命令行开关。
|
||||
|
||||
你可以在 [app][app] 模块的 [ready][ready] 事件发出之前使用 [app.commandLine.appendSwitch][append-switch] 来添加它们到你应用的 main 脚本里面：
|
||||
|
||||
```javascript
|
||||
const app = require('electron').app
|
||||
const {app} = require('electron')
|
||||
app.commandLine.appendSwitch('remote-debugging-port', '8315')
|
||||
app.commandLine.appendSwitch('host-rules', 'MAP * 127.0.0.1')
|
||||
|
||||
app.on('ready', function () {
|
||||
app.on('ready', () => {
|
||||
// Your code here
|
||||
})
|
||||
```
|
||||
|
|
@ -30,7 +32,7 @@ app.on('ready', function () {
|
|||
|
||||
## --js-flags=`flags`
|
||||
|
||||
指定引擎过渡到 JS 引擎.
|
||||
指定引擎过渡到 JS 引擎.
|
||||
|
||||
在启动Electron时，如果你想在主进程中激活 `flags` ，它将被转换.
|
||||
|
||||
|
|
@ -138,3 +140,5 @@ app.commandLine.appendSwitch('proxy-bypass-list', '<local>;*.google.com;*foo.com
|
|||
[append-switch]: app.md#appcommandlineappendswitchswitch-value
|
||||
[ready]: app.md#event-ready
|
||||
[play-silent-audio]: https://github.com/atom/atom/pull/9485/files
|
||||
[debugging-main-process]: ../tutorial/debugging-main-process.md
|
||||
[node-cli]: https://nodejs.org/api/cli.html
|
||||
|
|
|
|||
|
|
@ -1,29 +1,30 @@
|
|||
# `File`对象
|
||||
# `File` 对象
|
||||
|
||||
为了让用户能够通过HTML5的file API直接操作本地文件，DOM的File接口提供了对本地文件的抽象。Electron在File接口中增加了一个path属性，它是文件在系统中的真实路径。
|
||||
> 在文件系统上使用 HTML5 `File` API 与本地文件交互。
|
||||
|
||||
---
|
||||
为了让用户能够通过 HTML5 的 file API 直接操作本地文件，DOM 的 File 接口提供了对本地文件的抽象。Electron 在 File 接口中增加了一个 path 属性，它是文件在系统中的真实路径。
|
||||
|
||||
获取拖动到APP中文件的真实路径的例子：
|
||||
获取拖动到 APP 中文件的真实路径的例子：
|
||||
|
||||
```
|
||||
```html
|
||||
<div id="holder">
|
||||
Drag your file here
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var holder = document.getElementById('holder');
|
||||
holder.ondragover = function () {
|
||||
const holder = document.getElementById('holder')
|
||||
holder.ondragover = () => {
|
||||
return false;
|
||||
};
|
||||
holder.ondragleave = holder.ondragend = function () {
|
||||
}
|
||||
holder.ondragleave = holder.ondragend = () => {
|
||||
return false;
|
||||
};
|
||||
holder.ondrop = function (e) {
|
||||
e.preventDefault();
|
||||
var file = e.dataTransfer.files[0];
|
||||
console.log('File you dragged here is', file.path);
|
||||
}
|
||||
holder.ondrop = (e) => {
|
||||
e.preventDefault()
|
||||
for (let f of e.dataTransfer.files) {
|
||||
console.log('File(s) you dragged here: ', f.path)
|
||||
}
|
||||
return false;
|
||||
};
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,71 +1,84 @@
|
|||
# 简介
|
||||
|
||||
所有的[Node.js's built-in modules][1]在Electron中都可用，并且所有的node的第三方组件也可以放心使用（包括[自身的模块][2]）。
|
||||
> 如何使用 Node.js 和 Electron APIs。
|
||||
|
||||
Electron也提供了一些额外的内置组件来开发传统桌面应用。一些组件只可以在主进程中使用，一些只可以在渲染进程中使用，但是也有部分可以在这2种进程中都可使用。
|
||||
所有的[Node.js's built-in modules](https://nodejs.org/api/)在 Electron 中都可用，并且所有的 node 的第三方组件也可以放心使用（包括[自身的模块](../tutorial/using-native-node-modules.md)）。
|
||||
|
||||
基本规则：GUI模块或者系统底层的模块只可以在主进程中使用。要使用这些模块，你应当很熟悉[主进程vs渲染进程][3]脚本的概念。
|
||||
Electron 也提供了一些额外的内置组件来开发传统桌面应用。一些组件只可以在主进程中使用，一些只可以在渲染进程中使用（ web 页面），但是也有部分可以在这2种进程中都可使用。
|
||||
|
||||
主进程脚本看起来像个普通的nodejs脚本
|
||||
基本规则：GUI模块或者系统底层的模块只可以在主进程中使用。要使用这些模块，你应当很熟悉[主进程vs渲染进程](../tutorial/quick-start.md#main-process)脚本的概念。
|
||||
|
||||
主进程脚本看起来像个普通的 Node.js 脚本：
|
||||
|
||||
```javascript
|
||||
const electron = require('electron')
|
||||
const app = electron.app
|
||||
const BrowserWindow = electron.BrowserWindow
|
||||
const {app, BrowserWindow} = require('electron')
|
||||
let win = null
|
||||
|
||||
var window = null
|
||||
|
||||
app.on('ready', function () {
|
||||
window = new BrowserWindow({width: 800, height: 600})
|
||||
window.loadURL('https://github.com')
|
||||
app.on('ready', () => {
|
||||
win = new BrowserWindow({width: 800, height: 600})
|
||||
win.loadURL('https://github.com')
|
||||
})
|
||||
```
|
||||
|
||||
渲染进程和传统的web界面一样，除了它具有使用node模块的能力：
|
||||
渲染进程和传统的 web 界面一样，除了它具有使用 node 模块的能力：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<script>
|
||||
const remote = require('electron').remote;
|
||||
console.log(remote.app.getVersion());
|
||||
const {app} = require('electron').remote
|
||||
console.log(app.getVersion())
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
如果想运行应用，参考 `Run your app` 。
|
||||
如果想运行应用，参考 [Run your app](../tutorial/quick-start.md#run-your-app)。
|
||||
|
||||
## 解构任务
|
||||
|
||||
如果你使用的是CoffeeScript或Babel，你可以使用[destructuring assignment][4]来让使用内置模块更简单:
|
||||
在 v0.37 版本之后，你可以使用[destructuring assignment][destructuring-assignment] 来更加简单地使用内置模块。
|
||||
|
||||
```javascript
|
||||
const {app, BrowserWindow} = require('electron')
|
||||
|
||||
let win
|
||||
|
||||
app.on('ready', () => {
|
||||
win = new BrowserWindow()
|
||||
win.loadURL('https://github.com')
|
||||
})
|
||||
```
|
||||
|
||||
然而如果你使用的是普通的JavaScript，你就需要等到Chrome支持ES6了。
|
||||
|
||||
##使用内置模块时禁用旧样式
|
||||
|
||||
在版本v0.35.0之前，所有的内置模块都需要按造 `require('module-name')` 形式来使用，虽然它有很多[弊端][5]，我们仍然在老的应用中友好的支持它。
|
||||
|
||||
为了完整的禁用旧样式，你可以设置环境变量 `ELECTRON_HIDE_INTERNAL_MODULES ` :
|
||||
如果你需要整个 `electron` 模块，你可以加载并使用
|
||||
从 `electron` 解构访问各个模块。
|
||||
|
||||
```javascript
|
||||
process.env.ELECTRON_HIDE_INTERNAL_MODULES = 'true'
|
||||
const electron = require('electron')
|
||||
const {app, BrowserWindow} = electron
|
||||
|
||||
let win
|
||||
|
||||
app.on('ready', () => {
|
||||
win = new BrowserWindow()
|
||||
win.loadURL('https://github.com')
|
||||
})
|
||||
```
|
||||
|
||||
或者调用 `hideInternalModules` API:
|
||||
这相当于以下代码：
|
||||
|
||||
```javascript
|
||||
require('electron').hideInternalModules()
|
||||
const electron = require('electron')
|
||||
const app = electron.app
|
||||
const BrowserWindow = electron.BrowserWindow
|
||||
let win
|
||||
|
||||
app.on('ready', () => {
|
||||
win = new BrowserWindow()
|
||||
win.loadURL('https://github.com')
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
[1]:http://nodejs.org/api/
|
||||
[2]:https://github.com/heyunjiang/electron/blob/master/docs/tutorial/using-native-node-modules.md
|
||||
[3]:https://github.com/heyunjiang/electron/blob/master/docs/tutorial/quick-start.md#the-main-process
|
||||
[4]:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
|
||||
[5]:https://github.com/electron/electron/issues/387
|
||||
[gui]: https://en.wikipedia.org/wiki/Graphical_user_interface
|
||||
[destructuring-assignment]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
|
||||
|
|
|
|||
|
|
@ -1,40 +1,74 @@
|
|||
# `<webview>` 标签
|
||||
|
||||
使用 `webview` 标签来把 'guest' 内容（例如 web pages ）嵌入到你的 Electron app 中. guest内容包含在 `webview` 容器中.一个嵌入你应用的page控制着guest内容如何布局摆放和表达含义.
|
||||
> 在隔离的 frame 和进程中显示外部 Web 内容。
|
||||
|
||||
与 `iframe` 不同, `webview` 和你的应用运行的是不同的进程. 它不拥有渲染进程的权限，并且应用和嵌入内容之间的交互全部都是异步的.因为这能保证应用的安全性不受嵌入内容的影响.
|
||||
使用 `webview` 标签来把 'guest' 内容（例如 web pages ）嵌入到你的 Electron app 中。guest内容包含在 `webview` 容器中。一个嵌入你应用的 page 控制着 guest 内容如何布局摆放和表达含义。
|
||||
|
||||
与 `iframe` 不同，`webview` 和你的应用运行的是不同的进程。它不拥有渲染进程的权限，并且应用和嵌入内容之间的交互全部都是异步的。因为这能保证应用的安全性不受嵌入内容的影响。
|
||||
|
||||
## 例子
|
||||
|
||||
把一个 web page 嵌入到你的app，首先添加 `webview` 标签到你的app待嵌入page(展示 guest content). 在一个最简单的 `webview` 中，它包含了 web page 的文件路径和一个控制 `webview` 容器展示效果的css样式:
|
||||
把一个 web page 嵌入到你的 app，首先添加 `webview` 标签到你的 app 待嵌入 page (展示 guest content)。在一个最简单的 `webview` 中，它包含了 web page 的文件路径和一个控制 `webview` 容器展示效果的 css 样式：
|
||||
|
||||
```html
|
||||
<webview id="foo" src="https://www.github.com/" style="display:inline-block; width:640px; height:480px"></webview>
|
||||
<webview id="foo" src="https://www.github.com/" style="display:inline-flex; width:640px; height:480px"></webview>
|
||||
```
|
||||
|
||||
如果想随时控制 guest 内容，可以添加 JavaScript 脚本来监听 `webview` 事件使用 `webview` 方法来做出响应. 这里是2个事件监听的例子：一个监听 web page 准备加载，另一个监听 web page 停止加载，并且在加载的时候显示一条 "loading..." 信息:
|
||||
如果想随时控制 guest 内容，可以添加 JavaScript 脚本来监听 `webview` 事件，使用 `webview` 方法来做出响应。这里是2个事件监听的例子：一个监听 web page 准备加载，另一个监听 web page 停止加载，并且在加载的时候显示一条 "loading..." 信息：
|
||||
|
||||
```html
|
||||
<script>
|
||||
onload = function() {
|
||||
var webview = document.getElementById("foo");
|
||||
var indicator = document.querySelector(".indicator");
|
||||
onload = () => {
|
||||
const webview = document.getElementById('foo')
|
||||
const indicator = document.querySelector('.indicator')
|
||||
|
||||
var loadstart = function() {
|
||||
indicator.innerText = "loading...";
|
||||
const loadstart = () => {
|
||||
indicator.innerText = 'loading...'
|
||||
}
|
||||
var loadstop = function() {
|
||||
indicator.innerText = "";
|
||||
|
||||
const loadstop = () => {
|
||||
indicator.innerText = ''
|
||||
}
|
||||
webview.addEventListener("did-start-loading", loadstart);
|
||||
webview.addEventListener("did-stop-loading", loadstop);
|
||||
|
||||
webview.addEventListener('did-start-loading', loadstart)
|
||||
webview.addEventListener('did-stop-loading', loadstop)
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## CSS样式说明
|
||||
|
||||
请注意，`webview` 标签的样式在内部使用 `display:flex;`
|
||||
确保子对象 `object` 元素填充其 `webview` 的完整高度和宽度
|
||||
容器，当使用传统和 flexbox 布局（从v0.36.11）。请
|
||||
不要覆盖默认的 `display：flex;` CSS属性，除非指定
|
||||
`display：inline-flex;` 用于内联布局。
|
||||
|
||||
`webview` 有使用 `hidden` 属性或使用 `display：none;` 隐藏的问题。
|
||||
它可以导致在 `browserplugin` 子对象中异常的呈现行为
|
||||
并且重新加载网页，当 `webview` 是未隐藏的，而不是只是
|
||||
变得可见。 推荐隐藏 `webview` 的方法是使用
|
||||
CSS通过 `flex` 布局设置 `width` 和 `height`，并允许元素缩小到0px
|
||||
尺寸。
|
||||
|
||||
```html
|
||||
<style>
|
||||
webview {
|
||||
display:inline-flex;
|
||||
width:640px;
|
||||
height:480px;
|
||||
}
|
||||
webview.hide {
|
||||
flex: 0 1;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## 标签属性
|
||||
|
||||
`webview` 标签有下面一些属性 :
|
||||
`webview` 标签有下面一些属性：
|
||||
|
||||
### `src`
|
||||
|
||||
|
|
@ -42,12 +76,12 @@
|
|||
<webview src="https://www.github.com/"></webview>
|
||||
```
|
||||
|
||||
将一个可用的url做为这个属性的初始值添加到顶部导航.
|
||||
将一个可用的 url 做为这个属性的初始值添加到顶部导航。
|
||||
|
||||
如果把当前页的src添加进去将加载当前page.
|
||||
如果把当前页的 src 添加进去将加载当前 page。
|
||||
|
||||
`src`同样可以填 data urls，例如
|
||||
`data:text/plain,Hello, world!`.
|
||||
`src` 同样可以填 data urls，例如
|
||||
`data:text/plain,Hello, world!`。
|
||||
|
||||
### `autosize`
|
||||
|
||||
|
|
@ -55,8 +89,8 @@
|
|||
<webview src="https://www.github.com/" autosize="on" minwidth="576" minheight="432"></webview>
|
||||
```
|
||||
|
||||
如果这个属性的值为 "on" ， `webview` 容器将会根据属性`minwidth`, `minheight`, `maxwidth`, 和
|
||||
`maxheight` 的值在它们之间自适应. 只有在 `autosize` 开启的时候这个约束才会有效. 当 `autosize` 开启的时候， `webview` 容器的 size 只能在上面那四个属性值之间.
|
||||
如果这个属性的值为 "on" ， `webview` 容器将会根据属性 `minwidth`, `minheight`, `maxwidth`, 和
|
||||
`maxheight` 的值在它们之间自适应。只有在 `autosize` 开启的时候这个约束才会有效。当 `autosize` 开启的时候， `webview` 容器的 size 只能在上面那四个属性值之间。
|
||||
|
||||
### `nodeintegration`
|
||||
|
||||
|
|
@ -64,7 +98,7 @@
|
|||
<webview src="http://www.google.com/" nodeintegration></webview>
|
||||
```
|
||||
|
||||
如果设置了这个属性， `webview` 中的 guest page 将整合node，并且拥有可以使用系统底层的资源，例如 `require` 和 `process` .
|
||||
如果这个属性的值为 "on"， `webview` 中的 guest page 将整合node，并且拥有可以使用系统底层的资源，例如 `require` 和 `process`。
|
||||
|
||||
### `plugins`
|
||||
|
||||
|
|
@ -72,7 +106,7 @@
|
|||
<webview src="https://www.github.com/" plugins></webview>
|
||||
```
|
||||
|
||||
如果这个属性的值为 "on" ， `webview` 中的 guest page 就可以使用浏览器插件。
|
||||
如果这个属性的值为 "on"， `webview` 中的 guest page 就可以使用浏览器插件。
|
||||
|
||||
### `preload`
|
||||
|
||||
|
|
@ -80,9 +114,9 @@
|
|||
<webview src="https://www.github.com/" preload="./test.js"></webview>
|
||||
```
|
||||
|
||||
在 guest page 中的其他脚本执行之前预加载一个指定的脚本。规定预加载脚本的url须如 `file:` 或者 `asar:`，因为它在是 guest page 中通过通过 `require` 命令加载的。
|
||||
在 guest page 中的其他脚本执行之前预加载一个指定的脚本。规定预加载脚本的 url 须如 `file:` 或者 `asar:`，因为它在是 guest page 中通过通过 `require` 命令加载的。
|
||||
|
||||
如果 guest page 没有整合 node ，这个脚本将试图使用真个 Node APIs ，但是在这个脚本执行完毕时，之前由node插入的全局对象会被删除。
|
||||
如果 guest page 没有整合 node，这个脚本将试图使用真个 Node APIs，但是在这个脚本执行完毕时，之前由 node 插入的全局对象会被删除。
|
||||
|
||||
|
||||
### `httpreferrer`
|
||||
|
|
@ -107,7 +141,7 @@
|
|||
<webview src="https://www.github.com/" disablewebsecurity></webview>
|
||||
```
|
||||
|
||||
如果这个属性的值为 "on" ， guest page会禁用web安全控制.
|
||||
如果这个属性的值为 "on"， guest page会禁用web安全控制。
|
||||
|
||||
### partition
|
||||
|
||||
|
|
@ -116,9 +150,9 @@
|
|||
<webview src="http://electron.atom.io" partition="electron"></webview>
|
||||
```
|
||||
|
||||
为page设置session。如果初始值为 `partition` ,这个 page 将会为app中的所有 page 应用同一个持续有效的 session。如果没有 `persist:` 前缀, 这个 page 将会使用一个历史 session 。通过分配使用相同的 `partition`, 所有的page都可以分享相同的session。如果 `partition` 没有设置，那app将使用默认的session.
|
||||
为 page 设置 session。如果初始值为 `partition` ，这个 page 将会为app中的所有 page 应用同一个持续有效的 session。如果没有 `persist:` 前缀, 这个 page 将会使用一个历史 session。通过分配使用相同的 `partition`, 所有的 page 都可以分享相同的session。如果 `partition` 没有设置，那 app 将使用默认的 session。
|
||||
|
||||
这个值只能在在第一个渲染进程之前设置修改，之后修改的话会无效并且抛出一个DOM异常.
|
||||
这个值只能在在第一个渲染进程之前设置修改，之后修改的话会无效并且抛出一个 DOM 异常。
|
||||
|
||||
### `allowpopups`
|
||||
|
||||
|
|
@ -126,7 +160,22 @@
|
|||
<webview src="https://www.github.com/" allowpopups></webview>
|
||||
```
|
||||
|
||||
如果这个属性的值为 "on" ，将允许 guest page 打开一个新窗口。
|
||||
如果这个属性的值为 "on"，将允许 guest page 打开一个新窗口。
|
||||
|
||||
### `webpreferences`
|
||||
|
||||
```html
|
||||
<webview src="https://github.com" webpreferences="allowDisplayingInsecureContent, javascript=no"></webview>
|
||||
```
|
||||
|
||||
指定要在 webview 上设置的 web 首选项的字符串列表，用 `,` 分隔。
|
||||
支持的首选项字符串的完整列表
|
||||
[BrowserWindow](browser-window.md#new-browserwindowoptions)。
|
||||
|
||||
该字符串遵循与 `window.open` 中的 features 字符串相同的格式。
|
||||
一个名称本身赋予一个 `true` 布尔值。
|
||||
可以通过包含一个 `=`，然后是值来将首选项设置为另一个值。
|
||||
特殊值 `yes` 和 `1` 被解释为 `true`，而 `no` 和 `0` 被解释为 `false`。
|
||||
|
||||
### `blinkfeatures`
|
||||
|
||||
|
|
@ -136,6 +185,66 @@
|
|||
|
||||
这个属性的值为一个用逗号分隔的列表，它的值指定特性被启用。你可以从[setFeatureEnabledFromString][blink-feature-string]函数找到完整的支持特性。
|
||||
|
||||
### `disableblinkfeatures`
|
||||
|
||||
```html
|
||||
<webview src="https://www.github.com/" disableblinkfeatures="PreciseMemoryInfo, CSSVariables"></webview>
|
||||
```
|
||||
|
||||
指定要禁用的 blink 特征的字符串列表，用 `,` 分隔。
|
||||
支持的功能字符串的完整列表
|
||||
[RuntimeEnabledFeatures.in][blink-feature-string]。
|
||||
|
||||
### `guestinstance`
|
||||
|
||||
```html
|
||||
<webview src="https://www.github.com/" guestinstance="3"></webview>
|
||||
```
|
||||
|
||||
将 webview 链接到特定 webContents 的值。当一个 webview
|
||||
首先加载并创建一个新的 webContents 且将此属性设置为其
|
||||
实例标识符。新的或现有的 webview 设定这个属性连接，
|
||||
目前在不同的 webview 中显示到现有的 webcontent。
|
||||
|
||||
现有的 webview 将看到 `destroy` 事件，然后在加载新网址时，将创建一个新的 webContents。
|
||||
|
||||
### `disableguestresize`
|
||||
|
||||
```html
|
||||
<webview src="https://www.github.com/" disableguestresize></webview>
|
||||
```
|
||||
|
||||
当 webview 元素本身为时，阻止 webview 内容调整大小。
|
||||
|
||||
这可以结合使用
|
||||
[`webContents.setSize`](web-contents.md#contentssetsizeoptions) 手动
|
||||
响应于窗口大小改变来调整 webview 内容的大小。这可以
|
||||
与依赖于 webview 元素的 bounds 相比，更快地
|
||||
自动调整内容大小。
|
||||
|
||||
```javascript
|
||||
const {webContents} = require('electron')
|
||||
|
||||
// We assume that `win` points to a `BrowserWindow` instance containing a
|
||||
// `<webview>` with `disableguestresize`.
|
||||
|
||||
win.on('resize', () => {
|
||||
const [width, height] = win.getContentSize()
|
||||
for (let wc of webContents.getAllWebContents()) {
|
||||
// Check if `wc` belongs to a webview in the `win` window.
|
||||
if (wc.hostWebContents &&
|
||||
wc.hostWebContents.id === win.webContents.id) {
|
||||
wc.setSize({
|
||||
normal: {
|
||||
width: width,
|
||||
height: height
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 方法
|
||||
|
||||
`webview` 的方法集合:
|
||||
|
|
@ -145,7 +254,8 @@
|
|||
**例如**
|
||||
|
||||
```javascript
|
||||
webview.addEventListener('dom-ready', function () {
|
||||
const webview = document.getElementById('foo')
|
||||
webview.addEventListener('dom-ready', () => {
|
||||
webview.openDevTools()
|
||||
})
|
||||
```
|
||||
|
|
@ -154,230 +264,230 @@ webview.addEventListener('dom-ready', function () {
|
|||
|
||||
* `url` URL
|
||||
* `options` Object (可选)
|
||||
* `httpReferrer` String - 一个http类型的url.
|
||||
* `userAgent` String -用于发起请求的用户代理.
|
||||
* `extraHeaders` String - 额外的headers,用 "\n"分隔.
|
||||
* `httpReferrer` String - 一个http类型的url。
|
||||
* `userAgent` String -用于发起请求的用户代理。
|
||||
* `extraHeaders` String - 额外的headers,用 "\n"分隔。
|
||||
* `postData` ([UploadRawData](structures/upload-raw-data.md) | [UploadFile](structures/upload-file.md) | [UploadFileSystem](structures/upload-file-system.md) | [UploadBlob](structures/upload-blob.md))[] - (optional)
|
||||
|
||||
加载 webview 中的 `url`，`url` 必须包含协议前缀，例如 `http://` 或 `file://`.
|
||||
加载 webview 中的 `url`，`url` 必须包含协议前缀，例如 `http://` 或 `file://`。
|
||||
|
||||
### `<webview>.getURL()`
|
||||
|
||||
从 guest page 中返回 url.
|
||||
从 guest page 中返回 url。
|
||||
|
||||
### `<webview>.getTitle()`
|
||||
|
||||
从 guest page 中返回 title.
|
||||
从 guest page 中返回 title。
|
||||
|
||||
### `<webview>.isLoading()`
|
||||
|
||||
返回一个 guest page 是否仍在加载资源的布尔值.
|
||||
返回一个 guest page 是否仍在加载资源的布尔值。
|
||||
|
||||
### `<webview>.isWaitingForResponse()`
|
||||
|
||||
返回一个 guest page 是否正在等待page的主要资源做出回应的布尔值.
|
||||
|
||||
返回一个 guest page 是否正在等待page的主要资源做出回应的布尔值。
|
||||
|
||||
### `<webview>.stop()`
|
||||
|
||||
停止渲染.
|
||||
停止渲染。
|
||||
|
||||
### `<webview>.reload()`
|
||||
|
||||
重新加载 guest page.
|
||||
重新加载 guest page。
|
||||
|
||||
### `<webview>.reloadIgnoringCache()`
|
||||
|
||||
忽视缓存，重新加载 guest page.
|
||||
忽视缓存，重新加载 guest page。
|
||||
|
||||
### `<webview>.canGoBack()`
|
||||
|
||||
返回一个 guest page 是否能够回退的布尔值.
|
||||
返回一个 guest page 是否能够回退的布尔值。
|
||||
|
||||
### `<webview>.canGoForward()`
|
||||
|
||||
返回一个 guest page 是否能够前进的布尔值.
|
||||
返回一个 guest page 是否能够前进的布尔值。
|
||||
|
||||
### `<webview>.canGoToOffset(offset)`
|
||||
|
||||
* `offset` Integer
|
||||
|
||||
返回一个 guest page 是否能够前进到 `offset` 的布尔值.
|
||||
返回一个 guest page 是否能够前进到 `offset` 的布尔值。
|
||||
|
||||
### `<webview>.clearHistory()`
|
||||
|
||||
清除导航历史.
|
||||
清除导航历史。
|
||||
|
||||
### `<webview>.goBack()`
|
||||
|
||||
guest page 回退.
|
||||
guest page 回退。
|
||||
|
||||
### `<webview>.goForward()`
|
||||
|
||||
guest page 前进.
|
||||
guest page 前进。
|
||||
|
||||
### `<webview>.goToIndex(index)`
|
||||
|
||||
* `index` Integer
|
||||
|
||||
guest page 导航到指定的绝对位置.
|
||||
guest page 导航到指定的绝对位置。
|
||||
|
||||
### `<webview>.goToOffset(offset)`
|
||||
|
||||
* `offset` Integer
|
||||
|
||||
guest page 导航到指定的相对位置.
|
||||
guest page 导航到指定的相对位置。
|
||||
|
||||
### `<webview>.isCrashed()`
|
||||
|
||||
返回一个 渲染进程是否崩溃 的布尔值.
|
||||
返回一个 渲染进程是否崩溃 的布尔值。
|
||||
|
||||
### `<webview>.setUserAgent(userAgent)`
|
||||
|
||||
* `userAgent` String
|
||||
|
||||
重新设置用户代理.
|
||||
重新设置用户代理。
|
||||
|
||||
### `<webview>.getUserAgent()`
|
||||
|
||||
返回用户代理名字，返回类型：`String`.
|
||||
返回用户代理名字，返回类型：`String`。
|
||||
|
||||
### `<webview>.insertCSS(css)`
|
||||
|
||||
* `css` String
|
||||
|
||||
插入css.
|
||||
插入css。
|
||||
|
||||
### `<webview>.executeJavaScript(code, userGesture, callback)`
|
||||
|
||||
* `code` String
|
||||
* `userGesture` Boolean - 默认 `false`.
|
||||
* `callback` Function (可选) - 回调函数.
|
||||
* `userGesture` Boolean - 默认 `false`。
|
||||
* `callback` Function (可选) - 回调函数。
|
||||
* `result`
|
||||
|
||||
评估 `code` ，如果 `userGesture` 值为 true ，它将在这个page里面创建用户手势. HTML APIs ，如 `requestFullScreen`,它需要用户响应，那么将自动通过这个参数优化.
|
||||
评估 `code` ，如果 `userGesture` 值为 true，它将在这个page里面创建用户手势. HTML APIs，如 `requestFullScreen`，它需要用户响应，那么将自动通过这个参数优化。
|
||||
|
||||
### `<webview>.openDevTools()`
|
||||
|
||||
为 guest page 打开开发工具调试窗口.
|
||||
为 guest page 打开开发工具调试窗口。
|
||||
|
||||
### `<webview>.closeDevTools()`
|
||||
|
||||
为 guest page 关闭开发工具调试窗口.
|
||||
为 guest page 关闭开发工具调试窗口。
|
||||
|
||||
### `<webview>.isDevToolsOpened()`
|
||||
|
||||
返回一个 guest page 是否打开了开发工具调试窗口的布尔值.
|
||||
返回一个 guest page 是否打开了开发工具调试窗口的布尔值。
|
||||
|
||||
### `<webview>.isDevToolsFocused()`
|
||||
|
||||
返回一个 guest page 是否聚焦了开发工具调试窗口的布尔值.
|
||||
返回一个 guest page 是否聚焦了开发工具调试窗口的布尔值。
|
||||
|
||||
### `<webview>.inspectElement(x, y)`
|
||||
|
||||
* `x` Integer
|
||||
* `y` Integer
|
||||
|
||||
开始检查 guest page 在 (`x`, `y`) 位置的元素.
|
||||
开始检查 guest page 在 (`x`, `y`) 位置的元素。
|
||||
|
||||
### `<webview>.inspectServiceWorker()`
|
||||
|
||||
在 guest page 中为服务人员打开开发工具.
|
||||
在 guest page 中为服务人员打开开发工具。
|
||||
|
||||
### `<webview>.setAudioMuted(muted)`
|
||||
|
||||
* `muted` Boolean
|
||||
设置 guest page 流畅(muted).
|
||||
设置 guest page 流畅(muted)。
|
||||
|
||||
### `<webview>.isAudioMuted()`
|
||||
|
||||
返回一个 guest page 是否流畅的布尔值.
|
||||
返回一个 guest page 是否流畅的布尔值。
|
||||
|
||||
### `<webview>.undo()`
|
||||
|
||||
在page中编辑执行 `undo` 命令.
|
||||
在page中编辑执行 `undo` 命令。
|
||||
|
||||
### `<webview>.redo()`
|
||||
|
||||
在page中编辑执行 `redo` 命令.
|
||||
在page中编辑执行 `redo` 命令。
|
||||
|
||||
### `<webview>.cut()`
|
||||
|
||||
在page中编辑执行 `cut` 命令.
|
||||
在page中编辑执行 `cut` 命令。
|
||||
|
||||
### `<webview>.copy()`
|
||||
|
||||
在page中编辑执行 `copy` 命令.
|
||||
在page中编辑执行 `copy` 命令。
|
||||
|
||||
### `<webview>.paste()`
|
||||
|
||||
在page中编辑执行 `paste` 命令.
|
||||
在page中编辑执行 `paste` 命令。
|
||||
|
||||
### `<webview>.pasteAndMatchStyle()`
|
||||
|
||||
在page中编辑执行 `pasteAndMatchStyle` 命令.
|
||||
在page中编辑执行 `pasteAndMatchStyle` 命令。
|
||||
|
||||
### `<webview>.delete()`
|
||||
|
||||
在page中编辑执行 `delete` 命令.
|
||||
在page中编辑执行 `delete` 命令。
|
||||
|
||||
### `<webview>.selectAll()`
|
||||
|
||||
在page中编辑执行 `selectAll` 命令.
|
||||
在page中编辑执行 `selectAll` 命令。
|
||||
|
||||
### `<webview>.unselect()`
|
||||
|
||||
在page中编辑执行 `unselect` 命令.
|
||||
在page中编辑执行 `unselect` 命令。
|
||||
|
||||
### `<webview>.replace(text)`
|
||||
|
||||
* `text` String
|
||||
|
||||
在page中编辑执行 `replace` 命令.
|
||||
在page中编辑执行 `replace` 命令。
|
||||
|
||||
### `<webview>.replaceMisspelling(text)`
|
||||
|
||||
* `text` String
|
||||
|
||||
在page中编辑执行 `replaceMisspelling` 命令.
|
||||
在page中编辑执行 `replaceMisspelling` 命令。
|
||||
|
||||
### `<webview>.insertText(text)`
|
||||
|
||||
* `text` String
|
||||
|
||||
插入文本.
|
||||
插入文本。
|
||||
|
||||
### `<webview>.findInPage(text[, options])`
|
||||
|
||||
* `text` String - 搜索内容,不能为空.
|
||||
* `text` String - 搜索内容,不能为空。
|
||||
* `options` Object (可选)
|
||||
* `forward` Boolean - 向前或向后, 默认为 `true`.
|
||||
* `findNext` Boolean - 是否查找的第一个结果,
|
||||
默认为 `false`.
|
||||
* `matchCase` Boolean - 是否区分大小写,
|
||||
默认为 `false`.
|
||||
* `wordStart` Boolean - 是否只查找首字母.
|
||||
默认为 `false`.
|
||||
* `medialCapitalAsWordStart` Boolean - 当配合 `wordStart`的时候,接受一个文字中的匹配项，要求匹配项是以大写字母开头后面跟小写字母或者没有字母。可以接受一些其他单词内部匹配, 默认为 `false`.
|
||||
* `forward` Boolean - 向前或向后, 默认为 `true`。
|
||||
* `findNext` Boolean - 是否查找的第一个结果，
|
||||
默认为 `false`。
|
||||
* `matchCase` Boolean - 是否区分大小写，
|
||||
默认为 `false`。
|
||||
* `wordStart` Boolean - 是否只查找首字母，
|
||||
默认为 `false`。
|
||||
* `medialCapitalAsWordStart` Boolean - 当配合 `wordStart`的时候,接受一个文字中的匹配项，要求匹配项是以大写字母开头后面跟小写字母或者没有字母。可以接受一些其他单词内部匹配, 默认为 `false`。
|
||||
|
||||
发起一个请求来寻找页面中的所有匹配 `text` 的地方并且返回一个 `Integer`来表示这个请求用的请求Id. 这个请求结果可以通过订阅[`found-in-page`](webview-tag.md#event-found-in-page) 事件来取得.
|
||||
发起一个请求来寻找页面中的所有匹配 `text` 的地方并且返回一个 `Integer` 来表示这个请求用的请求Id。这个请求结果可以通过订阅 [`found-in-page`](webview-tag.md#event-found-in-page) 事件来取得。
|
||||
|
||||
### `<webview>.stopFindInPage(action)`
|
||||
|
||||
* `action` String - 指定一个行为来接替停止
|
||||
[`<webview>.findInPage`](webview-tag.md#webviewtagfindinpage) 请求.
|
||||
* `clearSelection` - 转变为一个普通的 selection.
|
||||
* `keepSelection` - 清除 selection.
|
||||
* `activateSelection` - 聚焦并点击 selection node.
|
||||
[`<webview>.findInPage`](webview-tag.md#webviewtagfindinpage) 请求。
|
||||
* `clearSelection` - 转变为一个普通的 selection。
|
||||
* `keepSelection` - 清除 selection。
|
||||
* `activateSelection` - 聚焦并点击 selection node。
|
||||
|
||||
使用 `action` 停止 `findInPage` 请求.
|
||||
使用 `action` 停止 `findInPage` 请求。
|
||||
|
||||
### `<webview>.print([options])`
|
||||
|
||||
打印输出 `webview` 的 web page. 类似 `webContents.print([options])`.
|
||||
打印输出 `webview` 的 web page. 类似 `webContents.print([options])`。
|
||||
|
||||
### `<webview>.printToPDF(options, callback)`
|
||||
|
||||
以pdf格式打印输出 `webview` 的 web page. 类似 `webContents.printToPDF(options, callback)`.
|
||||
以pdf格式打印输出 `webview` 的 web page. 类似 `webContents.printToPDF(options, callback)`。
|
||||
|
||||
### `<webview>.send(channel[, arg1][, arg2][, ...])`
|
||||
|
||||
|
|
@ -385,50 +495,70 @@ guest page 导航到指定的相对位置.
|
|||
* `arg` (可选)
|
||||
|
||||
通过 `channel` 向渲染进程发出异步消息，你也可以发送任意的参数。
|
||||
渲染进程通过`ipcRenderer` 模块监听 `channel` 事件来控制消息.
|
||||
渲染进程通过`ipcRenderer` 模块监听 `channel` 事件来控制消息。
|
||||
|
||||
例子
|
||||
[webContents.send](web-contents.md#webcontentssendchannel-args).
|
||||
[webContents.send](web-contents.md#webcontentssendchannel-args)。
|
||||
|
||||
### `<webview>.sendInputEvent(event)`
|
||||
|
||||
* `event` Object
|
||||
|
||||
向 page 发送输入事件.
|
||||
向 page 发送输入事件。
|
||||
|
||||
查看 [webContents.sendInputEvent](web-contents.md##webcontentssendinputeventevent)
|
||||
关于 `event` 对象的相信介绍.
|
||||
关于 `event` 对象的相信介绍。
|
||||
|
||||
### `<webview>.setZoomFactor(factor)`
|
||||
|
||||
* `factor` Number - 缩放系数。
|
||||
|
||||
将缩放系数更改为指定的系数。 缩放系数为
|
||||
缩放百分比除以100，因此300％ = 3.0。
|
||||
|
||||
### `<webview>.setZoomLevel(level)`
|
||||
|
||||
* `level` Number - 缩放级别。
|
||||
|
||||
将缩放级别更改为指定级别。 原始大小为0，每个
|
||||
增量高于或低于表示缩放大于或小于20％。默认值
|
||||
限制分别为原始尺寸的300％和50％。
|
||||
|
||||
### `<webview>.showDefinitionForSelection()` _macOS_
|
||||
|
||||
显示在页面上搜索所选字词的弹出字典。
|
||||
|
||||
### `<webview>.getWebContents()`
|
||||
|
||||
返回和这个 `webview` 相关的 [WebContents](web-contents.md).
|
||||
返回和这个 `webview` 相关的 [WebContents](web-contents.md)。
|
||||
|
||||
## DOM 事件
|
||||
|
||||
`webview` 可用下面的 DOM 事件:
|
||||
`webview` 可用下面的 DOM 事件：
|
||||
|
||||
### Event: 'load-commit'
|
||||
|
||||
返回:
|
||||
返回：
|
||||
|
||||
* `url` String
|
||||
* `isMainFrame` Boolean
|
||||
|
||||
加载完成触发. 这个包含当前文档的导航和副框架的文档加载，但是不包含异步资源加载.
|
||||
加载完成触发. 这个包含当前文档的导航和副框架的文档加载，但是不包含异步资源加载。
|
||||
|
||||
### Event: 'did-finish-load'
|
||||
|
||||
在导航加载完成时触发，也就是tab 的 spinner停止spinning，并且加载事件处理.
|
||||
在导航加载完成时触发，也就是 tab 的 spinner 停止 spinning，并且加载事件处理。
|
||||
|
||||
### Event: 'did-fail-load'
|
||||
|
||||
Returns:
|
||||
Returns：
|
||||
|
||||
* `errorCode` Integer
|
||||
* `errorDescription` String
|
||||
* `validatedURL` String
|
||||
* `isMainFrame` Boolean
|
||||
|
||||
类似 `did-finish-load` ，在加载失败或取消是触发，例如提出 `window.stop()`.
|
||||
类似 `did-finish-load` ，在加载失败或取消是触发，例如提出 `window.stop()`。
|
||||
|
||||
### Event: 'did-frame-finish-load'
|
||||
|
||||
|
|
@ -436,19 +566,19 @@ Returns:
|
|||
|
||||
* `isMainFrame` Boolean
|
||||
|
||||
当一个 frame 完成 加载时触发.
|
||||
当一个 frame 完成加载时触发。
|
||||
|
||||
### Event: 'did-start-loading'
|
||||
|
||||
开始加载时触发.
|
||||
开始加载时触发。
|
||||
|
||||
### Event: 'did-stop-loading'
|
||||
|
||||
停止家在时触发.
|
||||
停止家在时触发。
|
||||
|
||||
### Event: 'did-get-response-details'
|
||||
|
||||
返回:
|
||||
返回：
|
||||
|
||||
* `status` Boolean
|
||||
* `newURL` String
|
||||
|
|
@ -459,171 +589,180 @@ Returns:
|
|||
* `headers` Object
|
||||
* `resourceType` String
|
||||
|
||||
当获得返回详情的时候触发.
|
||||
当获得返回详情的时候触发。
|
||||
|
||||
`status` 指示 socket 连接来下载资源.
|
||||
`status` 指示 socket 连接来下载资源。
|
||||
|
||||
### Event: 'did-get-redirect-request'
|
||||
|
||||
返回:
|
||||
返回：
|
||||
|
||||
* `oldURL` String
|
||||
* `newURL` String
|
||||
* `isMainFrame` Boolean
|
||||
|
||||
当重定向请求资源被接收的时候触发.
|
||||
当重定向请求资源被接收的时候触发。
|
||||
|
||||
### Event: 'dom-ready'
|
||||
|
||||
当指定的frame文档加载完毕时触发.
|
||||
当指定的frame文档加载完毕时触发。
|
||||
|
||||
### Event: 'page-title-updated'
|
||||
|
||||
返回:
|
||||
返回：
|
||||
|
||||
* `title` String
|
||||
* `explicitSet` Boolean
|
||||
|
||||
当导航中的页面title被设置时触发.
|
||||
在title通过文档路径异步加载时`explicitSet`为false.
|
||||
当导航中的页面 title 被设置时触发。
|
||||
在 title 通过文档路径异步加载时 `explicitSet` 为 false。
|
||||
|
||||
### Event: 'page-favicon-updated'
|
||||
|
||||
返回:
|
||||
返回：
|
||||
|
||||
* `favicons` Array - Array of URLs.
|
||||
* `favicons` Array - Array of URLs。
|
||||
|
||||
当page收到了图标url时触发.
|
||||
当page收到了图标url时触发。
|
||||
|
||||
### Event: 'enter-html-full-screen'
|
||||
|
||||
当通过HTML API使界面进入全屏时触发.
|
||||
当通过 HTML API 使界面进入全屏时触发。
|
||||
|
||||
### Event: 'leave-html-full-screen'
|
||||
|
||||
当通过HTML API使界面退出全屏时触发.
|
||||
当通过 HTML API 使界面退出全屏时触发。
|
||||
|
||||
### Event: 'console-message'
|
||||
|
||||
返回:
|
||||
返回：
|
||||
|
||||
* `level` Integer
|
||||
* `message` String
|
||||
* `line` Integer
|
||||
* `sourceId` String
|
||||
|
||||
当客户端输出控制台信息的时候触发.
|
||||
当客户端输出控制台信息的时候触发。
|
||||
|
||||
下面示例代码将所有信息输出到内置控制台，没有考虑到输出等级和其他属性。
|
||||
|
||||
```javascript
|
||||
webview.addEventListener('console-message', function (e) {
|
||||
const webview = document.getElementById('foo')
|
||||
webview.addEventListener('console-message', (e) => {
|
||||
console.log('Guest page logged a message:', e.message)
|
||||
})
|
||||
```
|
||||
|
||||
### Event: 'found-in-page'
|
||||
|
||||
返回:
|
||||
返回：
|
||||
|
||||
* `result` Object
|
||||
* `requestId` Integer
|
||||
* `finalUpdate` Boolean - 指明下面是否还有更多的回应.
|
||||
* `activeMatchOrdinal` Integer (可选) - 活动匹配位置
|
||||
* `matches` Integer (optional) - 匹配数量.
|
||||
* `selectionArea` Object (optional) - 整合第一个匹配域.
|
||||
* `activeMatchOrdinal` Integer (可选) - 活动匹配位置。
|
||||
* `matches` Integer (optional) - 匹配数量。
|
||||
* `selectionArea` Object (optional) - 整合第一个匹配域。
|
||||
|
||||
在请求[`webview.findInPage`](webview-tag.md#webviewtagfindinpage)结果有效时触发.
|
||||
在请求 [`webview.findInPage`](webview-tag.md#webviewtagfindinpage) 结果有效时触发。
|
||||
|
||||
```javascript
|
||||
webview.addEventListener('found-in-page', function (e) {
|
||||
if (e.result.finalUpdate) webview.stopFindInPage('keepSelection')
|
||||
const webview = document.getElementById('foo')
|
||||
webview.addEventListener('found-in-page', (e) => {
|
||||
webview.stopFindInPage('keepSelection')
|
||||
})
|
||||
|
||||
const rquestId = webview.findInPage('test')
|
||||
const requestId = webview.findInPage('test')
|
||||
console.log(requestId)
|
||||
```
|
||||
|
||||
### Event: 'new-window'
|
||||
|
||||
返回:
|
||||
返回：
|
||||
|
||||
* `url` String
|
||||
* `frameName` String
|
||||
* `disposition` String - 可以为 `default`, `foreground-tab`, `background-tab`,
|
||||
`new-window` 和 `other`.
|
||||
* `options` Object - 参数应该被用作创建新的
|
||||
`BrowserWindow`.
|
||||
* `disposition` String - 可以为 `default`, `foreground-tab`, `background-tab`，`new-window` 和 `other`。
|
||||
* `options` Object - 参数应该被用作创建新的 `BrowserWindow`。
|
||||
|
||||
在 guest page 试图打开一个新的浏览器窗口时触发.
|
||||
在 guest page 试图打开一个新的浏览器窗口时触发。
|
||||
|
||||
下面示例代码在系统默认浏览器中打开了一个新的url.
|
||||
下面示例代码在系统默认浏览器中打开了一个新的 url。
|
||||
|
||||
```javascript
|
||||
webview.addEventListener('new-window', function (e) {
|
||||
require('electron').shell.openExternal(e.url)
|
||||
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)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### Event: 'will-navigate'
|
||||
|
||||
返回:
|
||||
返回：
|
||||
|
||||
* `url` String
|
||||
|
||||
当用户或page尝试开始导航时触发.
|
||||
它能在 `window.location` 变化或者用户点击连接的时候触发.
|
||||
当用户或page尝试开始导航时触发。
|
||||
它能在 `window.location` 变化或者用户点击连接的时候触发。
|
||||
|
||||
这个事件在以 APIS 编程方式开始导航时不会触发，例如 `<webview>.loadURL` 和 `<webview>.back`.
|
||||
这个事件在以 APIS 编程方式开始导航时不会触发，例如 `<webview>.loadURL` 和 `<webview>.back`。
|
||||
|
||||
在页面内部导航跳转也将不回触发这个事件，例如点击锚链接或更新 `window.location.hash`.使用 `did-navigate-in-page` 来实现页内跳转事件.
|
||||
在页面内部导航跳转也将不回触发这个事件，例如点击锚链接或更新 `window.location.hash`。使用 `did-navigate-in-page` 来实现页内跳转事件。
|
||||
|
||||
使用 `event.preventDefault()` 并不会起什么用.
|
||||
使用 `event.preventDefault()` 并不会起什么用。
|
||||
|
||||
### Event: 'did-navigate'
|
||||
|
||||
返回:
|
||||
返回：
|
||||
|
||||
* `url` String
|
||||
|
||||
当导航结束时触发.
|
||||
当导航结束时触发。
|
||||
|
||||
在页面内部导航跳转也将不回触发这个事件，例如点击锚链接或更新 `window.location.hash`.使用 `did-navigate-in-page` 来实现页内跳转事件.
|
||||
在页面内部导航跳转也将不回触发这个事件，例如点击锚链接或更新 `window.location.hash`。使用 `did-navigate-in-page` 来实现页内跳转事件。
|
||||
|
||||
### Event: 'did-navigate-in-page'
|
||||
|
||||
返回:
|
||||
返回：
|
||||
|
||||
* `isMainFrame` Boolean
|
||||
* `url` String
|
||||
|
||||
当页内导航发生时触发.
|
||||
当业内导航发生时，page url改变了，但是不会跳出 page . 例如在锚链接被电击或DOM `hashchange` 事件发生时触发.
|
||||
当页内导航发生时触发。
|
||||
当业内导航发生时，page url 改变了，但是不会跳出 page。例如在锚链接被点击或 DOM `hashchange` 事件发生时触发。
|
||||
|
||||
### Event: 'close'
|
||||
|
||||
在 guest page试图关闭自己的时候触发.
|
||||
在 guest page 试图关闭自己的时候触发。
|
||||
|
||||
下面的示例代码指示了在客户端试图关闭自己的时候将改变导航连接为`about:blank`.
|
||||
下面的示例代码指示了在客户端试图关闭自己的时候将改变导航连接为 `about:blank`。
|
||||
|
||||
```javascript
|
||||
webview.addEventListener('close', function () {
|
||||
const webview = document.getElementById('foo')
|
||||
webview.addEventListener('close', () => {
|
||||
webview.src = 'about:blank'
|
||||
})
|
||||
```
|
||||
|
||||
### Event: 'ipc-message'
|
||||
|
||||
返回:
|
||||
返回：
|
||||
|
||||
* `channel` String
|
||||
* `args` Array
|
||||
|
||||
在 guest page 向嵌入页发送一个异步消息的时候触发.
|
||||
在 guest page 向嵌入页发送一个异步消息的时候触发。
|
||||
|
||||
你可以很简单的使用 `sendToHost` 方法和 `ipc-message` 事件在 guest page 和 嵌入页(embedder page)之间通信:
|
||||
你可以很简单的使用 `sendToHost` 方法和 `ipc-message` 事件在 guest page 和嵌入页(embedder page)之间通信：
|
||||
|
||||
```javascript
|
||||
// In embedder page.
|
||||
webview.addEventListener('ipc-message', function (event) {
|
||||
const webview = document.getElementById('foo')
|
||||
webview.addEventListener('ipc-message', (event) => {
|
||||
console.log(event.channel)
|
||||
// Prints "pong"
|
||||
})
|
||||
|
|
@ -632,60 +771,68 @@ webview.send('ping')
|
|||
|
||||
```javascript
|
||||
// In guest page.
|
||||
var ipcRenderer = require('electron').ipcRenderer
|
||||
ipcRenderer.on('ping', function () {
|
||||
const {ipcRenderer} = require('electron')
|
||||
ipcRenderer.on('ping', () => {
|
||||
ipcRenderer.sendToHost('pong')
|
||||
})
|
||||
```
|
||||
|
||||
### Event: 'crashed'
|
||||
|
||||
在渲染进程崩溃的时候触发.
|
||||
在渲染进程崩溃的时候触发。
|
||||
|
||||
### Event: 'gpu-crashed'
|
||||
|
||||
在GPU进程崩溃的时候触发.
|
||||
在GPU进程崩溃的时候触发。
|
||||
|
||||
### Event: 'plugin-crashed'
|
||||
|
||||
返回:
|
||||
返回：
|
||||
|
||||
* `name` String
|
||||
* `version` String
|
||||
|
||||
在插件进程崩溃的时候触发.
|
||||
在插件进程崩溃的时候触发。
|
||||
|
||||
### Event: 'destroyed'
|
||||
|
||||
在界面内容销毁的时候触发.
|
||||
在界面内容销毁的时候触发。
|
||||
|
||||
### Event: 'media-started-playing'
|
||||
|
||||
在媒体准备播放的时候触发.
|
||||
在媒体准备播放的时候触发。
|
||||
|
||||
### Event: 'media-paused'
|
||||
|
||||
在媒体暂停播放或播放放毕的时候触发.
|
||||
在媒体暂停播放或播放放毕的时候触发。
|
||||
|
||||
### Event: 'did-change-theme-color'
|
||||
|
||||
在页面的主体色改变的时候触发.
|
||||
在使用 meta 标签的时候这就很常见了:
|
||||
在页面的主体色改变的时候触发。
|
||||
在使用 meta 标签的时候这就很常见了：
|
||||
|
||||
```html
|
||||
<meta name='theme-color' content='#ff0000'>
|
||||
```
|
||||
|
||||
### Event: 'update-target-url'
|
||||
|
||||
返回：
|
||||
|
||||
* `url` String
|
||||
|
||||
当鼠标移动到链接上或键盘将焦点移动到链接时触发。
|
||||
|
||||
### Event: 'devtools-opened'
|
||||
|
||||
在开发者工具打开的时候触发.
|
||||
在开发者工具打开的时候触发。
|
||||
|
||||
### Event: 'devtools-closed'
|
||||
|
||||
在开发者工具关闭的时候触发.
|
||||
在开发者工具关闭的时候触发。
|
||||
|
||||
### Event: 'devtools-focused'
|
||||
|
||||
在开发者工具获取焦点的时候触发.
|
||||
在开发者工具获取焦点的时候触发。
|
||||
|
||||
[blink-feature-string]: https://code.google.com/p/chromium/codesearch#chromium/src/out/Debug/gen/blink/platform/RuntimeEnabledFeatures.cpp&sq=package:chromium&type=cs&l=527
|
||||
|
|
|
|||
|
|
@ -5,18 +5,18 @@
|
|||
|
||||
## Notifications (Windows, Linux, macOS)
|
||||
|
||||
这三个操作系统都为用户提供了发送通知的方法。Electron让开发人员通过
|
||||
这三个操作系统都为用户提供了发送通知的方法。Electron 让开发人员通过
|
||||
[HTML5 Notification API](https://notifications.spec.whatwg.org/)
|
||||
便利的去发送通知，用操作系统自带的通知APIs去显示。
|
||||
便利的去发送通知，用操作系统自带的通知 APIs 去显示。
|
||||
|
||||
**Note:** 因为这是一个HTML5API，所以只在渲染进程中起作用
|
||||
**Note:** 因为这是一个 HTML5 API，所以只在渲染进程中起作用.
|
||||
|
||||
```javascript
|
||||
var myNotification = new Notification('Title', {
|
||||
let myNotification = new Notification('Title', {
|
||||
body: 'Lorem Ipsum Dolor Sit Amet'
|
||||
})
|
||||
|
||||
myNotification.onclick = function () {
|
||||
myNotification.onclick = () => {
|
||||
console.log('Notification clicked')
|
||||
}
|
||||
```
|
||||
|
|
@ -25,54 +25,70 @@ myNotification.onclick = function () {
|
|||
|
||||
### Windows
|
||||
|
||||
* 在Windows 10上, 通知"可以工作".
|
||||
* 在Windows 8.1和Windows 8系统下，你需要将你的应用通过一个[Application User
|
||||
* 在 Windows 10 上, 通知"可以工作"。
|
||||
* 在 Windows 8.1 和 Windows 8 系统下，你需要将你的应用通过一个[Application User
|
||||
Model ID][app-user-model-id]安装到开始屏幕上。需要注意的是，这不是将你的应用固定到开始屏幕。
|
||||
* 在Windows 7以及更低的版本中，通知不被支持。不过你可以使用[Tray API][tray-balloon]发送一个"气泡通知"。
|
||||
* 在 Windows 7 以及更低的版本中，通知不被支持。不过你可以使用 [Tray API][tray-balloon] 发送一个"气泡通知"。
|
||||
|
||||
此外，通知支持的最大字符长队为250。Windows团队建议通知应该保持在200个字符以下。
|
||||
此外，通知支持的最大字符长度为250。Windows 团队建议通知应该保持在200个字符以下。
|
||||
|
||||
### Linux
|
||||
|
||||
通知使用`libnotify`发送，它能在任何支持[Desktop Notifications
|
||||
通知使用 `libnotify` 发送，它能在任何支持[Desktop Notifications
|
||||
Specification][notification-spec]的桌面环境中显示，包括 Cinnamon, Enlightenment, Unity,
|
||||
GNOME, KDE。
|
||||
|
||||
### macOS
|
||||
|
||||
在macOS系统中，通知是直接转发的，你应该了解[Apple's Human Interface guidelines regarding notifications](https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines/NotificationCenter.html)。
|
||||
在 macOS 系统中，通知是直接转发的，你应该了解 [Apple's Human Interface guidelines regarding notifications](https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines/NotificationCenter.html)。
|
||||
|
||||
注意通知被限制在256个字节以内，如果超出，则会被截断。
|
||||
|
||||
## 最近文档 (Windows & macOS)
|
||||
|
||||
Windows 和 macOS 提供获取最近文档列表的便捷方式，那就是打开跳转列表或者鱼眼菜单。
|
||||
|
||||
跳转列表：
|
||||
![JumpList][1]
|
||||
__跳转列表：__
|
||||
|
||||
鱼眼菜单：
|
||||
![Dock Menu][2]
|
||||
|
||||
|
||||
__鱼眼菜单：__
|
||||
|
||||
<img src="https://cloud.githubusercontent.com/assets/639601/5069610/2aa80758-6e97-11e4-8cfb-c1a414a10774.png" height="353" width="428" >
|
||||
|
||||
为了增加一个文件到最近文件列表，你可以使用 [app.addRecentDocument][3] API:
|
||||
|
||||
```javascript
|
||||
var app = require('app')
|
||||
const {app} = require('electron')
|
||||
app.addRecentDocument('/Users/USERNAME/Desktop/work.type')
|
||||
```
|
||||
|
||||
或者你也可以使用 [app.clearRecentDocuments][4] API 来清空最近文件列表。
|
||||
|
||||
```javascript
|
||||
const {app} = require('electron')
|
||||
app.clearRecentDocuments()
|
||||
```
|
||||
|
||||
## Windows 需注意
|
||||
为了这个特性在 Windows 上表现正常，你的应用需要被注册成为一种文件类型的句柄，否则，在你注册之前，文件不会出现在跳转列表。你可以在 [Application Registration][5] 里找到任何关于注册事宜的说明。
|
||||
为了这个特性在 Windows 上表现正常，你的应用需要被注册成为一种文件类型的句柄，否则，在你注册之前，文件不会出现在跳转列表。你可以在 [Application Registration][app-registration] 里找到任何关于注册事宜的说明。
|
||||
|
||||
当用户点击从“跳转列表”点击一个文件，你的应用程序的新实例
|
||||
将以添加为命令行参数的文件的路径启动。
|
||||
|
||||
## macOS 需注意
|
||||
|
||||
当一个文件被最近文件列表请求时，`app` 模块里的 `open-file` 事件将会被发出。
|
||||
|
||||
## 自定义的鱼眼菜单(macOS)
|
||||
|
||||
macOS 可以让开发者定制自己的菜单，通常会包含一些常用特性的快捷方式。
|
||||
|
||||
### 菜单中的终端
|
||||
![Dock menu of Terminal.app][6]
|
||||
|
||||
__Dock menu of Terminal.app:__
|
||||
|
||||
<img src="https://cloud.githubusercontent.com/assets/639601/5069962/6032658a-6e9c-11e4-9953-aa84006bdfff.png" height="354" width="341" >
|
||||
|
||||
使用 `app.dock.setMenu` API 来设置你的菜单，这仅在 macOS 上可行：
|
||||
|
||||
|
|
@ -93,6 +109,7 @@ app.dock.setMenu(dockMenu)
|
|||
```
|
||||
|
||||
## 用户任务(Windows)
|
||||
|
||||
在 Windows，你可以特别定义跳转列表的 `Tasks` 目录的行为，引用 MSDN 的文档：
|
||||
|
||||
> Applications define tasks based on both the program's features and the key things a user is expected to do with them. Tasks should be context-free, in that the application does not need to be running for them to work. They should also be the statistically most common actions that a normal user would perform in an application, such as compose an email message or open the calendar in a mail program, create a new document in a word processor, launch an application in a certain mode, or launch one of its subcommands. An application should not clutter the menu with advanced features that standard users won't need or one-time actions such as registration. Do not use tasks for promotional items such as upgrades or special offers.
|
||||
|
|
@ -100,12 +117,15 @@ app.dock.setMenu(dockMenu)
|
|||
> It is strongly recommended that the task list be static. It should remain the same regardless of the state or status of the application. While it is possible to vary the list dynamically, you should consider that this could confuse the user who does not expect that portion of the destination list to change.
|
||||
|
||||
### IE 的任务
|
||||
![IE][7]
|
||||
|
||||
|
||||
|
||||
不同于 macOS 的鱼眼菜单，Windows 上的用户任务表现得更像一个快捷方式，比如当用户点击一个任务，一个程序将会被传入特定的参数并且运行。
|
||||
|
||||
你可以使用 [app.setUserTasks][8] API 来设置你的应用中的用户任务：
|
||||
你可以使用 [app.setUserTasks][setusertaskstasks] API 来设置你的应用中的用户任务：
|
||||
|
||||
```javascript
|
||||
var app = require('app')
|
||||
const {app} = require('electron')
|
||||
app.setUserTasks([
|
||||
{
|
||||
program: process.execPath,
|
||||
|
|
@ -117,13 +137,18 @@ app.setUserTasks([
|
|||
}
|
||||
])
|
||||
```
|
||||
|
||||
调用 `app.setUserTasks` 并传入空数组就可以清除你的任务列表：
|
||||
|
||||
```javascript
|
||||
const {app} = require('electron')
|
||||
app.setUserTasks([])
|
||||
```
|
||||
|
||||
当你的应用关闭时，用户任务会仍然会出现，在你的应用被卸载前，任务指定的图标和程序的路径必须是存在的。
|
||||
|
||||
### 缩略图工具栏
|
||||
|
||||
在 Windows，你可以在任务栏上添加一个按钮来当作应用的缩略图工具栏。它将提供用户一种用户访问常用窗口的方式，并且不需要恢复或者激活窗口。
|
||||
|
||||
在 MSDN，它被如是说：
|
||||
|
|
@ -132,83 +157,178 @@ app.setUserTasks([])
|
|||
> For example, Windows Media Player might offer standard media transport controls such as play, pause, mute, and stop.
|
||||
|
||||
### Windows Media Player 的缩略图工具栏
|
||||
![Thumbnail toolbar of Windows Media Player][9]
|
||||
你可以使用 [BrowserWindow.setThumbarButtons][10] 来设置你的应用的缩略图工具栏。
|
||||
|
||||
|
||||
|
||||
你可以使用 [BrowserWindow.setThumbarButtons][setthumbarbuttons] 来设置你的应用的缩略图工具栏。
|
||||
|
||||
```javascript
|
||||
var BrowserWindow = require('browser-window')
|
||||
var path = require('path')
|
||||
var win = new BrowserWindow({
|
||||
const {BrowserWindow} = require('electron')
|
||||
const path = require('path')
|
||||
|
||||
let win = new BrowserWindow({
|
||||
width: 800,
|
||||
height: 600
|
||||
})
|
||||
|
||||
win.setThumbarButtons([
|
||||
{
|
||||
tooltip: 'button1',
|
||||
icon: path.join(__dirname, 'button1.png'),
|
||||
click: function () { console.log('button2 clicked') }
|
||||
click () { console.log('button1 clicked') }
|
||||
},
|
||||
{
|
||||
tooltip: 'button2',
|
||||
icon: path.join(__dirname, 'button2.png'),
|
||||
flags: ['enabled', 'dismissonclick'],
|
||||
click: function () { console.log('button2 clicked.') }
|
||||
click () { console.log('button2 clicked.') }
|
||||
}
|
||||
])
|
||||
```
|
||||
|
||||
调用 `BrowserWindow.setThumbarButtons` 并传入空数组即可清空缩略图工具栏：
|
||||
|
||||
```javascript
|
||||
const {BrowserWindow} = require('electron')
|
||||
let win = new BrowserWindow()
|
||||
win.setThumbarButtons([])
|
||||
```
|
||||
|
||||
## Unity launcher 快捷方式(Linux)
|
||||
在 Unity,你可以通过改变 `.desktop` 文件来增加自定义运行器的快捷方式，详情看 [Adding shortcuts to a launcher][11]。
|
||||
|
||||
在 Unity,你可以通过改变 `.desktop` 文件来增加自定义运行器的快捷方式，详情看 [Adding Shortcuts to a Launcher][unity-launcher]。
|
||||
|
||||
__Launcher shortcuts of Audacious:__
|
||||
|
||||
|
||||
|
||||
### Audacious 运行器的快捷方式：
|
||||
|
||||
![Launcher shortcuts of Audacious][12]
|
||||
|
||||
## 任务栏的进度条(Windows & Unity)
|
||||
## 任务栏的进度条(Windows, macOS, Unity)
|
||||
|
||||
在 Windows，进度条可以出现在一个任务栏按钮之上。这可以提供进度信息给用户而不需要用户切换应用窗口。
|
||||
|
||||
在 macOS，进度条将显示为 dock 图标的一部分。
|
||||
|
||||
Unity DE 也具有同样的特性，在运行器上显示进度条。
|
||||
### 在任务栏上的进度条：
|
||||
![Progress bar in taskbar button][13]
|
||||
|
||||
### 在 Unity 运行器上的进度条
|
||||
![Progress bar in Unity launcher][14]
|
||||
__Progress bar in taskbar button:__
|
||||
|
||||
|
||||
|
||||
给一个窗口设置进度条，你可以调用 [BrowserWindow.setProgressBar][setprogressbar] API：
|
||||
|
||||
给一个窗口设置进度条，你可以调用 [BrowserWindow.setProgressBar][15] API：
|
||||
```javascript
|
||||
var window = new BrowserWindow()
|
||||
window.setProgressBar(0.5)
|
||||
const {BrowserWindow} = require('electron')
|
||||
let win = new BrowserWindow()
|
||||
win.setProgressBar(0.5)
|
||||
```
|
||||
|
||||
|
||||
## 任务栏中的叠加层图标 (Windows)
|
||||
|
||||
在 Windows，任务栏按钮可以使用小型叠加层显示应用程序
|
||||
状态，引用 MSDN 的文档：
|
||||
|
||||
> Icon overlays serve as a contextual notification of status, and are intended
|
||||
> to negate the need for a separate notification area status icon to communicate
|
||||
> that information to the user. For instance, the new mail status in Microsoft
|
||||
> Outlook, currently shown in the notification area, can now be indicated
|
||||
> through an overlay on the taskbar button. Again, you must decide during your
|
||||
> development cycle which method is best for your application. Overlay icons are
|
||||
> intended to supply important, long-standing status or notifications such as
|
||||
> network status, messenger status, or new mail. The user should not be
|
||||
> presented with constantly changing overlays or animations.
|
||||
|
||||
__Overlay on taskbar button:__
|
||||
|
||||
|
||||
|
||||
要设置窗口的叠加层图标，可以使用
|
||||
[BrowserWindow.setOverlayIcon][setoverlayicon] API:
|
||||
|
||||
```javascript
|
||||
const {BrowserWindow} = require('electron')
|
||||
let win = new BrowserWindow()
|
||||
win.setOverlayIcon('path/to/overlay.png', 'Description for overlay')
|
||||
```
|
||||
|
||||
## 突出显示框架 (Windows)
|
||||
|
||||
在 Windows，你可以突出显示任务栏按钮，以获得用户的关注。
|
||||
这类似于在 macOS 上弹出 dock 图标。
|
||||
在 MSDN，它如是说：
|
||||
|
||||
> Typically, a window is flashed to inform the user that the window requires
|
||||
> attention but that it does not currently have the keyboard focus.
|
||||
|
||||
要在 BrowserWindow 的任务栏按钮突出显示，可以使用
|
||||
[BrowserWindow.flashFrame][flashframe] API:
|
||||
|
||||
```javascript
|
||||
const {BrowserWindow} = require('electron')
|
||||
let win = new BrowserWindow()
|
||||
win.once('focus', () => win.flashFrame(false))
|
||||
win.flashFrame(true)
|
||||
```
|
||||
|
||||
不要忘记在调用 `flashFrame` 方法后，设置 `false` 来关闭突出显示。 在
|
||||
上面的例子，它是在窗口进入焦点时调用的，但你可能会
|
||||
使用超时或某些其他事件来禁用它。
|
||||
|
||||
## 展示文件窗口 (macOS)
|
||||
|
||||
在 macOS，一个窗口可以设置它展示的文件，文件的图标可以出现在标题栏，当用户 Command-Click 或者 Control-Click 标题栏，文件路径弹窗将会出现。
|
||||
### 展示文件弹窗菜单：
|
||||
![Represented file popup menu][16]
|
||||
|
||||
你可以调用 [BrowserWindow.setRepresentedFilename][17] 和 [BrowserWindow.setDocumentEdited][18] APIs：
|
||||
您还可以设置窗口的编辑状态，以便文件图标可以指示
|
||||
该窗口中的文档是否已修改。
|
||||
|
||||
__Represented file popup menu:__
|
||||
|
||||
<img src="https://cloud.githubusercontent.com/assets/639601/5082061/670a949a-6f14-11e4-987a-9aaa04b23c1d.png" height="232" width="663" >
|
||||
|
||||
要设置展示文件窗口，可以使用
|
||||
[BrowserWindow.setRepresentedFilename][setrepresentedfilename] 和
|
||||
[BrowserWindow.setDocumentEdited][setdocumentedited] APIs：
|
||||
|
||||
```javascript
|
||||
var window = new BrowserWindow()
|
||||
window.setRepresentedFilename('/etc/passwd')
|
||||
window.setDocumentEdited(true)
|
||||
const {BrowserWindow} = require('electron')
|
||||
let win = new BrowserWindow()
|
||||
win.setRepresentedFilename('/etc/passwd')
|
||||
win.setDocumentEdited(true)
|
||||
```
|
||||
|
||||
[1]:https://camo.githubusercontent.com/3310597e01f138b1d687e07aa618c50908a88dec/687474703a2f2f692e6d73646e2e6d6963726f736f66742e636f6d2f64796e696d672f49433432303533382e706e67
|
||||
[2]: https://cloud.githubusercontent.com/assets/639601/5069610/2aa80758-6e97-11e4-8cfb-c1a414a10774.png
|
||||
[3]: https://github.com/electron/electron/blob/master/docs-translations/zh-CN/api/app.md
|
||||
[4]: https://github.com/electron/electron/blob/master/docs/tutorial/clearrecentdocuments
|
||||
[5]: https://msdn.microsoft.com/en-us/library/windows/desktop/ee872121%28v=vs.85%29.aspx
|
||||
[6]: https://cloud.githubusercontent.com/assets/639601/5069962/6032658a-6e9c-11e4-9953-aa84006bdfff.png
|
||||
[7]: https://camo.githubusercontent.com/30154e0cc36acfc968ac9ae076a8f0d6600dd736/687474703a2f2f692e6d73646e2e6d6963726f736f66742e636f6d2f64796e696d672f49433432303533392e706e67
|
||||
[8]: https://github.com/electron/electron/blob/master/docs/api/app.md#appsetusertaskstasks
|
||||
[9]: https://camo.githubusercontent.com/098cb0f52f27084a80ec6429e51a195df3d8c333/68747470733a2f2f692d6d73646e2e7365632e732d6d7366742e636f6d2f64796e696d672f49433432303534302e706e67
|
||||
[10]: https://github.com/electron/electron/blob/master/docs-translations/zh-CN/api/browser-window.md
|
||||
[11]: https://help.ubuntu.com/community/UnityLaunchersAndDesktopFiles#Adding_shortcuts_to_a_launcher
|
||||
[12]: https://camo.githubusercontent.com/b6f54e2bc3206ebf8e08dd029529af9ec84d58ae/68747470733a2f2f68656c702e7562756e74752e636f6d2f636f6d6d756e6974792f556e6974794c61756e6368657273416e644465736b746f7046696c65733f616374696f6e3d41747461636846696c6526646f3d676574267461726765743d73686f7274637574732e706e67
|
||||
[13]: https://cloud.githubusercontent.com/assets/639601/5081682/16691fda-6f0e-11e4-9676-49b6418f1264.png
|
||||
[14]: https://cloud.githubusercontent.com/assets/639601/5081747/4a0a589e-6f0f-11e4-803f-91594716a546.png
|
||||
[15]: https://github.com/electron/electron/blob/master/docs-translations/zh-CN/api/browser-window.md
|
||||
[16]: https://cloud.githubusercontent.com/assets/639601/5082061/670a949a-6f14-11e4-987a-9aaa04b23c1d.png
|
||||
[17]: https://github.com/electron/electron/blob/master/docs-translations/zh-CN/api/browser-window.md
|
||||
[18]: https://github.com/electron/electron/blob/master/docs-translations/zh-CN/api/browser-window.md
|
||||
## 将文件拖出窗口
|
||||
|
||||
对于某些操作文件的应用程序，
|
||||
将文件从 Electron 拖动到其他应用程序是很重要的能力。要在 app 的实现此功能
|
||||
，你需要在 `ondragstart` 事件上调用 `webContents.startDrag(item)` API。
|
||||
|
||||
在网页端：
|
||||
|
||||
```html
|
||||
<a href="#" id="drag">item</a>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
document.getElementById('drag').ondragstart = (event) => {
|
||||
event.preventDefault()
|
||||
ipcRenderer.send('ondragstart', '/path/to/item')
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
在主进程：
|
||||
|
||||
```javascript
|
||||
const {ipcMain} = require('electron')
|
||||
ipcMain.on('ondragstart', (event, filePath) => {
|
||||
event.sender.startDrag({
|
||||
file: filePath,
|
||||
icon: '/path/to/icon.png'
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
[addrecentdocument]: ../api/app.md#appaddrecentdocumentpath-os-x-windows
|
||||
[clearrecentdocuments]: ../api/app.md#appclearrecentdocuments-os-x-windows
|
||||
|
|
@ -223,3 +343,4 @@ window.setDocumentEdited(true)
|
|||
[tray-balloon]: ../api/tray.md#traydisplayballoonoptions-windows
|
||||
[app-user-model-id]: https://msdn.microsoft.com/en-us/library/windows/desktop/dd378459(v=vs.85).aspx
|
||||
[notification-spec]: https://developer.gnome.org/notification-spec/
|
||||
[flashframe]: ../api/browser-window.md#winflashframeflag
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
# 在线/离线事件探测
|
||||
|
||||
使用标准 HTML5 APIs 可以实现在线和离线事件的探测，就像以下例子：
|
||||
|
||||
_main.js_
|
||||
|
|
@ -37,39 +38,48 @@ _online-status.html_
|
|||
也会有人想要在主进程也有回应这些事件的实例。然后主进程没有 `navigator` 对象因此不能直接探测在线还是离线。使用 Electron 的进程间通讯工具，事件就可以在主进程被使用，就像下面的例子：
|
||||
|
||||
*main.js*
|
||||
```javascript
|
||||
const electron = require('electron')
|
||||
const app = electron.app
|
||||
const ipcMain = electron.ipcMain
|
||||
const BrowserWindow = electron.BrowserWindow
|
||||
|
||||
var onlineStatusWindow
|
||||
app.on('ready', function () {
|
||||
```javascript
|
||||
const {app, BrowserWindow, ipcMain} = require('electron')
|
||||
let onlineStatusWindow
|
||||
|
||||
app.on('ready', () => {
|
||||
onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false })
|
||||
onlineStatusWindow.loadURL(`file://${__dirname}/online-status.html`)
|
||||
})
|
||||
|
||||
ipcMain.on('online-status-changed', function (event, status) {
|
||||
ipcMain.on('online-status-changed', (event, status) => {
|
||||
console.log(status)
|
||||
})
|
||||
```
|
||||
|
||||
*online-status.html*
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<script>
|
||||
const ipcRenderer = require('electron').ipcRenderer;
|
||||
var updateOnlineStatus = function() {
|
||||
ipcRenderer.send('online-status-changed', navigator.onLine ? 'online' : 'offline');
|
||||
};
|
||||
<body>
|
||||
<script>
|
||||
const {ipcRenderer} = require('electron')
|
||||
const updateOnlineStatus = () => {
|
||||
ipcRenderer.send('online-status-changed', navigator.onLine ? 'online' : 'offline')
|
||||
}
|
||||
|
||||
window.addEventListener('online', updateOnlineStatus);
|
||||
window.addEventListener('offline', updateOnlineStatus);
|
||||
window.addEventListener('online', updateOnlineStatus)
|
||||
window.addEventListener('offline', updateOnlineStatus)
|
||||
|
||||
updateOnlineStatus();
|
||||
</script>
|
||||
</body>
|
||||
updateOnlineStatus()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
**注意：** 如果 Electron 无法连接到局域网（LAN）或
|
||||
一个路由器，它被认为是离线的; 所有其他条件返回 `true`。
|
||||
所以，虽然你可以假设 Electron 是离线的，当 `navigator.onLine`
|
||||
返回一个 `false' 值，你不能假设一个 'true' 值必然
|
||||
意味着 Electron 可以访问互联网。你可能会获得虚假
|
||||
连接，例如在计算机运行虚拟化软件的情况下，
|
||||
具有始终“连接”的虚拟以太网适配器。
|
||||
因此，如果您真的想确定 Electron 的互联网访问状态，
|
||||
你应该开发额外的检查手段。
|
||||
|
|
|
|||
|
|
@ -5,68 +5,79 @@ Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造
|
|||
这不意味着 Electron 是绑定了 GUI 库的 JavaScript。相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。
|
||||
|
||||
## 主进程
|
||||
|
||||
在 Electron 里，运行 `package.json` 里 `main` 脚本的进程被称为**主进程**。在主进程运行的脚本可以以创建 web 页面的形式展示 GUI。
|
||||
|
||||
## 渲染进程
|
||||
|
||||
由于 Electron 使用 Chromium 来展示页面，所以 Chromium 的多进程结构也被充分利用。每个 Electron 的页面都在运行着自己的进程，这样的进程我们称之为**渲染进程**。
|
||||
|
||||
在一般浏览器中，网页通常会在沙盒环境下运行，并且不允许访问原生资源。然而，Electron 用户拥有在网页中调用 Node.js 的 APIs 的能力，可以与底层操作系统直接交互。
|
||||
|
||||
## 主进程与渲染进程的区别
|
||||
|
||||
主进程使用 `BrowserWindow` 实例创建页面。每个 `BrowserWindow` 实例都在自己的渲染进程里运行页面。当一个 `BrowserWindow` 实例被销毁后，相应的渲染进程也会被终止。
|
||||
|
||||
主进程管理所有页面和与之对应的渲染进程。每个渲染进程都是相互独立的，并且只关心他们自己的页面。
|
||||
|
||||
由于在页面里管理原生 GUI 资源是非常危险而且容易造成资源泄露，所以在页面调用 GUI 相关的 APIs 是不被允许的。如果你想在网页里使用 GUI 操作，其对应的渲染进程必须与主进程进行通讯，请求主进程进行相关的 GUI 操作。
|
||||
|
||||
在 Electron，我们提供几种方法用于主进程和渲染进程之间的通讯。像 [ipcRenderer][1] 和 [ipcMain][2] 模块用于发送消息， [remote][3] 模块用于 RPC 方式通讯。这些内容都可以在一个 FAQ 中查看 [how to share data between web pages][4]。
|
||||
在 Electron，我们提供几种方法用于主进程和渲染进程之间的通讯。像 [`ipcRenderer`](../api/ipc-renderer.md) 和 [`ipcMain`](../api/ipc-main.md) 模块用于发送消息， [remote](../api/remote.md) 模块用于 RPC 方式通讯。这些内容都可以在一个 FAQ 中查看 [how to share data between web pages][share-data]。
|
||||
|
||||
# 打造你第一个 Electron 应用
|
||||
|
||||
大体上，一个 Electron 应用的目录结构如下：
|
||||
````
|
||||
|
||||
```text
|
||||
your-app/
|
||||
├── package.json
|
||||
├── main.js
|
||||
└── index.html
|
||||
````
|
||||
`package.json `的格式和 Node 的完全一致，并且那个被 `main` 字段声明的脚本文件是你的应用的启动脚本，它运行在主进程上。你应用里的 `package.json` 看起来应该像：
|
||||
```javascripton
|
||||
```
|
||||
|
||||
`package.json` 的格式和 Node 的完全一致，并且那个被 `main` 字段声明的脚本文件是你的应用的启动脚本，它运行在主进程上。你应用里的 `package.json` 看起来应该像：
|
||||
|
||||
```json
|
||||
{
|
||||
"name" : "your-app",
|
||||
"version" : "0.1.0",
|
||||
"main" : "main.js"
|
||||
}
|
||||
```
|
||||
|
||||
**注意**：如果 `main` 字段没有在 `package.json` 声明，Electron会优先加载 `index.js`。
|
||||
|
||||
`main.js` 应该用于创建窗口和处理系统事件，一个典型的例子如下：
|
||||
|
||||
```javascript
|
||||
const electron = require('electron')
|
||||
// 控制应用生命周期的模块。
|
||||
const {app} = electron
|
||||
// 创建原生浏览器窗口的模块。
|
||||
const {BrowserWindow} = electron
|
||||
const {app, BrowserWindow} = require('electron')
|
||||
const path = require('path')
|
||||
const url = require('url')
|
||||
|
||||
// 保持一个对于 window 对象的全局引用，如果你不这样做，
|
||||
// 当 JavaScript 对象被垃圾回收， window 会被自动地关闭
|
||||
let mainWindow
|
||||
let win
|
||||
|
||||
function createWindow () {
|
||||
// 创建浏览器窗口。
|
||||
mainWindow = new BrowserWindow({width: 800, height: 600})
|
||||
win = new BrowserWindow({width: 800, height: 600})
|
||||
|
||||
// 加载应用的 index.html。
|
||||
mainWindow.loadURL(`file://${__dirname}/index.html`)
|
||||
win.loadURL(url.format({
|
||||
pathname: path.join(__dirname, 'index.html'),
|
||||
protocol: 'file:',
|
||||
slashes: true
|
||||
}))
|
||||
|
||||
// 启用开发工具。
|
||||
mainWindow.webContents.openDevTools()
|
||||
// 打开开发者工具。
|
||||
win.webContents.openDevTools()
|
||||
|
||||
// 当 window 被关闭，这个事件会被触发。
|
||||
mainWindow.on('closed', () => {
|
||||
win.on('closed', () => {
|
||||
// 取消引用 window 对象，如果你的应用支持多窗口的话，
|
||||
// 通常会把多个 window 对象存放在一个数组里面，
|
||||
// 与此同时，你应该删除相应的元素。
|
||||
mainWindow = null
|
||||
win = null
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -85,9 +96,9 @@ app.on('window-all-closed', () => {
|
|||
})
|
||||
|
||||
app.on('activate', () => {
|
||||
// 在 macOS 上，当点击 dock 图标并且该应用没有打开的窗口时，
|
||||
// 绝大部分应用会重新创建一个窗口。
|
||||
if (mainWindow === null) {
|
||||
// 在这文件，你可以续写应用剩下主进程代码。
|
||||
// 也可以拆分成几个文件，然后用 require 导入。
|
||||
if (win === null) {
|
||||
createWindow()
|
||||
}
|
||||
})
|
||||
|
|
@ -95,7 +106,9 @@ app.on('activate', () => {
|
|||
// 在这文件，你可以续写应用剩下主进程代码。
|
||||
// 也可以拆分成几个文件，然后用 require 导入。
|
||||
```
|
||||
最后，你想展示的 `index.html` ：
|
||||
|
||||
最后，你想展示的 `index.html`：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
|
@ -113,42 +126,65 @@ app.on('activate', () => {
|
|||
```
|
||||
|
||||
# 运行你的应用
|
||||
|
||||
一旦你创建了最初的 `main.js`， `index.html` 和 `package.json` 这几个文件，你可能会想尝试在本地运行并测试，看看是不是和期望的那样正常运行。
|
||||
|
||||
## electron-prebuilt
|
||||
[electron-prebuilt][5] 是一个 `npm` 模块，包含所使用的 Electron 预编译版本。
|
||||
|
||||
[`electron`](https://github.com/electron-userland/electron-prebuilt) 是一个 `npm` 模块，包含所使用的 Electron 预编译版本。
|
||||
如果你已经用 `npm` 全局安装了它，你只需要按照如下方式直接运行你的应用：
|
||||
|
||||
```bash
|
||||
electron .
|
||||
```
|
||||
|
||||
如果你是局部安装，那运行：
|
||||
|
||||
#### macOS / Linux
|
||||
|
||||
```bash
|
||||
./node_modules/.bin/electron .
|
||||
$ ./node_modules/.bin/electron .
|
||||
```
|
||||
|
||||
#### Windows
|
||||
|
||||
```bash
|
||||
$ .\node_modules\.bin\electron .
|
||||
```
|
||||
|
||||
## 手工下载 Electron 二进制文件
|
||||
|
||||
如果你手工下载了 Electron 的二进制文件，你也可以直接使用其中的二进制文件直接运行你的应用。
|
||||
|
||||
### Windows
|
||||
|
||||
```bash
|
||||
$ .\electron\electron.exe your-app\
|
||||
```
|
||||
|
||||
### Linux
|
||||
|
||||
```bash
|
||||
$ ./electron/electron your-app/
|
||||
```
|
||||
|
||||
### macOS
|
||||
|
||||
```bash
|
||||
$ ./Electron.app/Contents/MacOS/Electron your-app/
|
||||
```
|
||||
`Electron.app` 里面是 Electron 发布包，你可以在 [这里][6] 下载到。
|
||||
|
||||
`Electron.app` 里面是 Electron 发布包，你可以在 [这里](https://github.com/electron/electron/releases) 下载到。
|
||||
|
||||
# 以发行版本运行
|
||||
在你完成了你的应用后，你可以按照 [应用部署][7] 指导发布一个版本，并且以已经打包好的形式运行应用。
|
||||
|
||||
在你完成了你的应用后，你可以按照 [应用部署](./application-distribution.md) 指导发布一个版本，并且以已经打包好的形式运行应用。
|
||||
|
||||
# 参照下面例子
|
||||
复制并且运行这个库 [electron/electron-quick-start][8]。
|
||||
|
||||
*注意：*运行时需要你的系统已经安装了 [Git][9] 和 [Node.js][10]（包含 [npm][11]）。
|
||||
复制并且运行这个库 [`electron/electron-quick-start`](https://github.com/electron/electron-quick-start)。
|
||||
|
||||
**注意：**运行时需要你的系统已经安装了 [Git](https://git-scm.com) 和 [Node.js](https://nodejs.org/en/download/)（包含 [npm](https://npmjs.org)）。
|
||||
|
||||
```bash
|
||||
# 克隆这仓库
|
||||
|
|
@ -158,14 +194,7 @@ $ cd electron-quick-start
|
|||
# 安装依赖库并运行应用
|
||||
$ npm install && npm start
|
||||
```
|
||||
[1]: https://github.com/electron/electron/blob/v1.1.3/docs/api/ipc-renderer.md
|
||||
[2]: https://github.com/electron/electron/blob/v1.1.3/docs/api/ipc-main.md
|
||||
[3]: https://github.com/electron/electron/blob/v1.1.3/docs/api/remote.md
|
||||
[4]: https://github.com/electron/electron/blob/v1.1.3/docs/faq/electron-faq.md#how-to-share-data-between-web-pages
|
||||
[5]: https://github.com/electron-userland/electron-prebuilt
|
||||
[6]: https://github.com/electron/electron/releases
|
||||
[7]: https://github.com/electron/electron/blob/v1.1.3/docs/tutorial/application-distribution.md
|
||||
[8]: https://github.com/electron/electron-quick-start
|
||||
[9]: https://git-scm.com/
|
||||
[10]: https://nodejs.org/en/download/
|
||||
[11]: https://www.npmjs.com/
|
||||
|
||||
更多 apps 例子，查看 electron 社区创建的 [list of boilerplates](http://electron.atom.io/community/#boilerplates)。
|
||||
|
||||
[share-data]: ../faq.md#how-to-share-data-between-web-pages
|
||||
|
|
|
|||
|
|
@ -1,25 +1,25 @@
|
|||
# Testing Electron with headless CI Systems (Travis CI, Jenkins)
|
||||
# Headless CI Systems 测试 (Travis CI, Jenkins)
|
||||
|
||||
Electron基于Chromium，所以需要一个显示驱动使其运转。如果Chromium无法找到一个显示驱动，
|
||||
ELectron 会启动失败，因此无论你如何去运行它，Electron不会执行你的任何测试。在Travis, Circle,
|
||||
Electron 基于 Chromium，所以需要一个显示驱动使其运转。如果 Chromium 无法找到一个显示驱动，
|
||||
ELectron 会启动失败，因此无论你如何去运行它，Electron 不会执行你的任何测试。在 Travis，Circle，
|
||||
Jenkins 或者类似的系统上测试基于Electron的应用时，需要进行一些配置。本质上，我们需要使用一个
|
||||
虚拟的显示驱动。
|
||||
|
||||
## Configuring the Virtual Display Server
|
||||
## 配置虚拟显示服务器
|
||||
|
||||
首先安装[Xvfb](https://en.wikipedia.org/wiki/Xvfb)。
|
||||
首先安装 [Xvfb](https://en.wikipedia.org/wiki/Xvfb)。
|
||||
这是一个虚拟的帧缓冲，实现了X11显示服务协议，所有的图形操作都在内存中表现，而不需要显示在
|
||||
任何屏幕输出设备上。这正是我们所需要的。
|
||||
|
||||
然后创建一个虚拟的xvfb屏幕并且导出一个指向他的名为`DISPLAY`的环境变量。Electron中的Chromium
|
||||
会自动的去寻找`$DISPLAY`，所以你的应用不需要再去进行配置。这一步可以通过Paul Betts's的
|
||||
[xvfb-maybe](https://github.com/paulcbetts/xvfb-maybe)实现自动化：如果系统需要，在`xvfb-maybe`前加上你的测试命令
|
||||
然后这个小工具会自动的设置xvfb。在Windows或者macOS系统下，它不会执行任何东西。
|
||||
然后创建一个虚拟的xvfb屏幕并且导出一个指向他的名为 `DISPLAY` 的环境变量。Electron 中的 Chromium
|
||||
会自动的去寻找 `$DISPLAY`，所以你的应用不需要再去进行配置。这一步可以通过 Paul Betts 的
|
||||
[xvfb-maybe](https://github.com/paulcbetts/xvfb-maybe) 实现自动化：如果系统需要，在`xvfb-maybe`前加上你的测试命令
|
||||
然后这个小工具会自动的设置 xvfb。在 Windows 或者 macOS 系统下，它不会执行任何东西。
|
||||
|
||||
```
|
||||
## On Windows or macOS, this just invokes electron-mocha
|
||||
## On Linux, if we are in a headless environment, this will be equivalent
|
||||
## to xvfb-run electron-mocha ./test/*.js
|
||||
## 在 Windows 或者 macOS，这只是调用 electron-mocha
|
||||
## 在 Linux， 如果我们在 headless 环境，这将是等同于
|
||||
## xvfb-run electron-mocha ./test/*.js
|
||||
xvfb-maybe electron-mocha ./test/*.js
|
||||
```
|
||||
|
||||
|
|
@ -40,12 +40,12 @@ install:
|
|||
|
||||
### Jenkins
|
||||
|
||||
Jenkins下, 有一个可用的[Xvfb插件](https://wiki.jenkins-ci.org/display/JENKINS/Xvfb+Plugin).
|
||||
Jenkins下, 有一个可用的 [Xvfb插件](https://wiki.jenkins-ci.org/display/JENKINS/Xvfb+Plugin)。
|
||||
|
||||
### Circle CI
|
||||
|
||||
Circle CI 是非常棒的而且有xvfb，`$DISPLAY`也[已经搭建，所以不需要再进行设置](https://circleci.com/docs/environment#browsers)。
|
||||
Circle CI 是非常棒的而且有xvfb，`$DISPLAY` 也 [已经搭建，所以不需要再进行设置](https://circleci.com/docs/environment#browsers)。
|
||||
|
||||
### AppVeyor
|
||||
|
||||
AppVeyor运行于Windows上，支持 Selenium, Chromium, Electron 以及一些类似的工具,开箱即用，无需配置。
|
||||
AppVeyor 运行于 Windows 上，支持 Selenium，Chromium，Electron 以及一些类似的工具，开箱即用，无需配置。
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue