WebView 组件参考

    点击 属性检查器 下方的 添加组件 按钮，然后从 UI 组件 中选择 WebView，即可添加 WebView 组件到节点上。

    WebView 的脚本接口请参考 WebView API。

    注意：在 Webview Events 属性的 cc.Node 中，应该填入的是一个挂载有用户脚本组件的节点，在用户脚本中便可以根据用户需要使用相关的 WebView 事件。

    详情可参考 或者参考引擎自带的 example-cases 测试例中的 10_webview。

    目前此组件只支持 Web（PC 和手机）、iOS 和 Android 平台（v2.0.0～2.0.6 版本不支持），Mac 和 Windows 平台暂时还不支持，如果在场景中使用此组件，那么在 PC 的模拟器里面预览的时候可能看不到效果。

    注意:

    • WebView 组件暂时不支持加载指定 HTML 文件或者执行 Javascript 脚本。
    • 如果开发者在项目中未使用到 WebView 相关功能，请确保在 项目 -> 项目设置 -> 模块设置 中剔除 WebView 模块，以提高 iOS 的 App Store 机审成功率。如果开发者确实需要使用 WebView（或者添加的第三方 SDK 自带了 WebView），并因此 iOS 的 App Store 机审不通过，仍可尝试通过邮件进行申诉。

    方法一

    这种方法添加的事件回调和使用编辑器添加的事件回调是一样的，通过代码添加，你需要首先构造一个 对象，然后设置好对应的 target, component, handler 和 customEventData 参数。

    方法二

    1. //假设我们在一个组件的 onLoad 方法里面添加事件处理回调，在 callback 函数中进行事件处理:
    3. cc.Class({
    4.     extends: cc.Component,
    5.     properties: {
    6.         webview: cc.WebView,
    7.     },
    9.         this.webview.node.on('loaded', this.callback, this);
    10.     },
    12.     callback: function (event) {
    13.         //这里的 event 是一个 EventCustom 对象，你可以通过 event.detail 获取 WebView 组件
    14.         var webview = event.detail;
    15.         //do whatever you want with webview
    17.     }
    18. });

    同样的，你也可以注册 loading, error 事件，这些事件的回调函数的参数与 loaded 的参数一致。

    注意: Web 平台上的跨域问题需要自行解决

    目前 Android 与 iOS 用的机制是，通过截获 URL 的跳转，判断 URL 前缀的关键字是否与之相同，如果相同则进行回调。

    • 通过 setJavascriptInterfaceScheme 设置 URL 前缀关键字
    • 通过 setOnJSCallback 设置回调函数，函数参数为 URL
    1. cc.Class({
    2.     extends: cc.Component,
    3.     properties: {
    4.         webview: cc.WebView,
    5.     },
    6.     // onLoad 中设置会导致 API 绑定失效，所以请在 start 中设置 webview 回调。
    7.     start: function () {
    8.         // 这里是与内部页面约定的关键字，请不要使用大写字符，会导致 location 无法正确识别。
    9.         var scheme = "testkey";
    11.         function jsCallback (target, url) {
    12.             var str = url.replace(scheme + '://', ''); // str === 'a=1&b=2'
    13.             // webview target
    15.         }
    17.         this.webview.setJavascriptInterfaceScheme(scheme);
    18.         this.webview.setOnJSCallback(jsCallback);
    19.     }
    20. });

    因此当你需要通过内部页面交互 WebView 时，应当设置内部页面 URL：testkey://(后面你想要回调到 WebView 的数据)。WebView 内部页面代码如下：

    由于 Web 平台的限制，导致无法通过这种机制去实现，但是内部页面可以通过以下方式进行交互：

    1. <html>
    2. <body>
    3.     <dev>
    4.         <input type="button" value="触发" onclick="onClick()"/>
    5.     </dev>
    6. </body>
    7. <script>
    8.     function onClick () {
    9.         // 这里的 parent 其实就是外部的 window
    10.         // 这样一来就可以访问到定义在 cc 的函数了
    11.         parent.cc.TestCode();
    12.         // 如果 TestCode 是定义在 window 上，则
    13.         parent.TestCode();
    14.     }
    15. </html>

    再强调一遍: Web 平台上的跨域问题需要自行解决