web

v0.5+

<web> 用于在 jsn 页面中显示由 src 属性指定的页面内容。您还可以使用 webview 模块来控制 WebView 的行为，例如回退、前进和重新加载，更多信息请参见 webview module。

基本用法

注意： <web> 不支持任何嵌套的子组件，并且必须指定 width 和 height 的样式属性，否则将不起作用。

<web src="https://vuejs.org"></web>   <!--远程地址-->
<web src="index.html#/login"></web>   <!--本地地址-->

属性

属性	类型	值	默认值
src	String	{URL}	-

src

要加载的网页内容的 URL。您可以指定一个基于 bundle URL 的相对 URL，它将被重写为真实资源 URL（本地或远程）。

事件

只支持公共事件中的 appear 和 disappear 事件。

pagestart

pagestart 事件，会在 Web 页面开始加载时调用。

事件对象：

• url: {String} 当前 Web 页面的 URL。

pagefinish

pagefinish 事件，会在 Web 页面完成加载时调用。

事件对象：

• url: {String} 当前 Web 页面的 URL。
• canGoBack: {Boolean} 当前 Web 页面是否可以回退。
• canGoForward: {Boolean} 当前 Web 页面是否可以前进。
• title: {String} 当前 Web 页面的标题（仅限 iOS 平台）。

error

error 事件，会在 Web 页面加载失败时调用。

receivedtitle

receivedtitle 事件，会在 Web 页面的标题发生改变时调用（仅限 Android 平台）。

事件对象：

• url: {String} 当前 Web 页面的 URL。

shouldstartload

shouldstartload 事件，会在 Web 页面发生路由变化时触发，开发者可以自定义事件处理函数。

事件对象：

• url: {String} Web 页面将要加载的路由。

处理 <web> 事件

在 <web> 上绑定事件：

<web @pagestart="onPageStart" @pagefinish="onPageFinish" @error="onError" src="https://vuejs.org" @shouldstartload="onshouldstartload"></web>

添加事件 handler：

import Light from "light";
const Webview = Light.requireModule("webview");
export default {
  methods: {
    onPageStart (event) {
      // page start load
    },
    onPageFinish (event) {
      // page finish load
    },
    onError (event) {
      // page load error
    },
    onshouldstartload(event) {
      //拦截web页面的路由变化
      if(event.url == 'http://baidu.com') {
        Webview.shouldStartLoad(event, true);//继续当前webview的加载
      } else {
        //拦截跳转，打开一个新容器
        Light.requireModule("event").openNative("web", {
          startPage: event.url,
          navBarType: '1'
        });  
        Webview.shouldStartLoad(event, false);//停止当前webview的加载
      }
    }
  }
}

样式

支持公共样式。

使用注意事项

• 必须指定 <web> 的 width 和 height 样式。
• <web> 不能包含任何嵌套的子组件。
• 您可以使用 webview module 来控制 <web> 组件。