Cocos组件09-WebView组件：网页显示组件
WebView 组件是用来显示网页的组件。可用使用该组件让项目集成浏览器，使浏览器显示在项目中，选中节点，在属性检查器面板中添加该组件，将WebView组件添加到选中的节点上，可以在属性检查器面板中查看该组件的属性，如下图所示：
WebView组件的属性如下表所示
| 属性 | 说明 |
|---|---|
| Url | 指定一个URL，该地址以HTTP或HTTPS开头，填写一个有效的URL网址 |
| WebView Events | WebView组件的回调事件，加载网页结束或出错时会调用此函数 |
WebView 事件如表所示：
| 属性 | 说明 |
|---|---|
| Target | 没有脚本组件的节点 |
| Component | 脚本组件名称 |
| Handler | 指定一个回调函数，在网页加载过程中、加载完毕或加载出错时调用，该函数会传一个事件类型参数 |
| CustomEventData | 用户指定任意字符串作为事件回调的最后一个参数 |
WebView 事件回调参数
| 名称 | 说明 |
|---|---|
| LOADING | 网页正在加载过程中 |
| LOADED | 网页已经加载完毕 |
| ERROR | 网页加载出错 |
通过脚本代码添加回调方法如下：
1） 构造 cc.Component.EventHandler对象，并设置参数：
// 使用此方法添加的事件回调和使用编辑器添加的事件回调是一样的
cc.Class({
name: 'cc.MyComponent',
extends: cc.Component,
// 声明
properties: {
webview: cc.WebView
},
// 初始化
onLoad () {
// 构造一个 cc.Component.EventHandler对象
let webviewEventHandler = new cc.Component.EventHandler();
// 设置参数
webviewEventHandler.target = this.node;
// 脚本组件名称
webviewEventHandler.component = "cc.MyComponent";
// 回调函数
webviewEventHandler.handler = "callback";
// 回调函数参数
webviewEventHandler.customEventData = "foobar";
this.webview.webviewEvents.push(webviewEventHandler);
},
// 注意：参数的顺序和类型是固定的
callback: function (webview, eventType, customData) {
// 这里的 webview 是一个 WebView 组件对象实例
// 这里的 eventType 是 cc.WebView.EventType enum 里面的值
// 这里的 customEventData 参数就是之前设置的 "foobar"
}
});
2） 通过注册事件添加回调：
// 通过 webview.node.on('loaded', ...) 方式添加回调
// 假设在一个组件的 onLoad 方法里面添加事件处理回调，在 callback 函数中进行事件处理
cc.Class({
extends: cc.Component,
// 声明
properties: {
webview: cc.WebView
},
// 初始化
onLoad () {
// 注册loaded
this.webview.node.on('loaded', this.callback, this);
},
// 方法回调
callback: function (event) {
// 这里的 event 是一个 EventCustom 对象，可以通过 event.detail 获取
// WebView 组件
let webview = event.detail;
// do whatever you want with webview
// 使用这种方式注册的事件也无法传递 customEventData
}
});
同理，也可以注册 loading error 等事件，这些事件的回调函数的参数同 loaded 的参数相同！