<web>

v0.5+

<web> is used to display web content that specified by src attribute in weex page. You also can use webview module to control WebView behavior such as goBack, goForward and reload, See webview module for more information.

Basic Usage#

Note: <web> does not support any nested child components, and must specific width and height in style attribute, otherwise it won’t work.

<web src="https://vuejs.org"></web>

See the example.

Attributes#

Attribute Type Value Default Value
src String {URL} -

src#

A URL value for web content to be loaded. You can specify a URL which is relative to bundle URL, it will be rewritten to the real resource URL (local or remote). See also: Path.

Events#

Only support appear and disappear event in common events.

pagestart#

pagestart event handler will be called when the web content is start loading.

Event object:

  • url: {String} URL of current web content.

pagefinish#

pagefinish event handler will be called when the web content is loaded.

Event object:

  • url: {String} URL of current web content.
  • canGoBack: {Boolean} Can current web content go back.
  • canGoForward: {Boolean} Can current web content go forward.
  • title: {String} Title of current web content (iOS platform only).

error#

error event handler will be called when the web content loaded failed.

receivedtitle#

receivedtitle event handler will be called when the title of web content had changed (Android platform only).

Event object:

  • url: {String} URL of current web content.

Handle <web> Events#

Bind events on <web>:

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

Add event handler:

export default {
methods: {
onPageStart (event) {
// page start load
},
onPageFinish (event) {
// page finish load
},
onError (event) {
// page load error
},
}
}

See the example.

Styles#

Support common styles.

Usage Notes#

  • The width and height in the styles of <web> must be specified.
  • <web> can not have any nested child component.
  • You can use webview module to control <web> component, see the example.

Examples#

Edit this page on GitHub