A series of web operation api like goBack
, goForward
, and reload
. ‘webview’ module used with the web component.
Loads the previous location in the history stack.
Arguments
var webview = weex.requireModule('webview'); var webElement = this.$el('webview'); webview.goBack(webElement);
Loads the next location in the history stack.
Arguments
var webview = weex.requireModule('webview'); var webElement = this.$el('webview'); webview.goForward(webElement);
Reloads the current web page.
Arguments
var webview = weex.requireModule('webview'); var webElement = this.$el('webview'); webview.reload(webElement.ref);
<template> <div class="wrapper"> <div class="group"> <input class="input" v-model="value" ref="input" type="url" autofocus="false"></input> </div> <div class="group"> <text class="button" @click="loadURL">LoadURL</text> <text class="button" @click="reload">reload</text> </div> <web ref="webview" :src="url" class="webview" @pagestart="start" @pagefinish="finish" @error="error"></web> </div> </template> <script> const webview = weex.requireModule('webview') const modal = weex.requireModule('modal') export default { data () { return { url : 'https://m.alibaba.com', value: 'https://m.alibaba.com' } }, methods: { loadURL (event) { this.url = this.value modal.toast({ message: 'load url:' + this.url }) setTimeout(() => { console.log('will go back.') modal.toast({ message: 'will go back' }) webview.goBack(this.$refs.webview) }, 10000) }, reload (event) { console.log('will reload webview') modal.toast({ message: 'reload' }) webview.reload(this.$refs.webview) }, start (event) { console.log('pagestart', event) modal.toast({ message: 'pagestart' }) }, finish (event) { console.log('pagefinish', event) modal.toast({ message: 'pagefinish' }) }, error (event) { console.log('error', event) modal.toast({ message: 'error' }) } } } </script> <style scoped> .group { flex-direction: row; justify-content: space-around; margin-top: 20px; } .input { width: 600px; font-size: 36px; padding-top: 15px; padding-bottom: 15px; border-width: 2px; border-style: solid; border-color: #BBBBBB; } .button { width: 225px; text-align: center; background-color: #D3D3D3; padding-top: 15px; padding-bottom: 15px; margin-bottom: 30px; font-size: 30px; } .webview { margin-left: 75px; width: 600px; height: 750px; border-width: 2px; border-style: solid; border-color: #41B883; } </style>