<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.
<web>
is used to display the content of the web page specified by the src attribute in the WEEX page.
<web>
can combine H5 with Native elements.
<template> <web src="https://www.taobao.com/"></web> </template> <script></script> <style></style>
::: warning Note
<web>
does not support list, scroller, and slider components in the same direction nested scroll mode, which will cause scrolling conflicts;<web>
does not support any nested subcomponents;<web>
must specify style attributes for width and height, otherwise it will not work;<web>
;<web>
is only used as a degraded unconventional scenario and is not recommended for a large number of normal Weex pages.:::
Note:
<web>
does not support any nested child components, and must specificwidth
andheight
in style attribute, otherwise it won't work.
<web src="https://vuejs.org"></web>
See the example.
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.
Only support appear
and disappear
event in common events.
pagestart
event handler will be called when the web content is start loading.
Event object:
url
: {String} URL of current web content.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
event handler will be called when the web content loaded failed.
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.<web>
EventsBind 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.
Support common styles.
width
and height
in the styles of <web>
must be specified.<web>
can not have any nested child component.<web>
component, see the example.rax-embed
is the component <web>
of rax, which can run in web and weex.
import { createElement, render, Component } from 'rax'; import Driver from 'driver-universal'; import Embed from 'rax-embed'; function App() { const urlParam = { paramOne:123, paramTwo:456 }; return <Embed urlParam={urlParam} src={'http://taobao.com'} useIframeInWeb={true} style={{ height: 750, width: 750 }} /> } render(<App />, document.body, { driver: Driver });