weex-webview
v0.1.6
Published
适用于 web 和 weex 的 webview,提供更为强大的能力
Downloads
5
Readme
weex-webview
适用于 web 和 weex 的 webview,提供更为强大的能力
属性
src
需要加载的网页的 URL, 如果你设置了 src, 将会忽略 source
source
在 WebView 中载入一段静态的 html 代码, 优先采用 src
style
webview 样式
class
webview 类名
injectedSourceHead
会在加载前就往 head 标签插入代码,只有当是source的时候才会生效
injectedSourceBody
会在加载前就往 body 标签插入代码,只有当是source的时候才会生效
事件
appear
如果一个位于某个可滚动区域内的组件被绑定了 appear 事件,那么当这个组件的状态变为在屏幕上可见时,该事件将被触发。
type
:appear
target
: 触发Appear
事件的组件对象timestamp
: 事件被触发时的时间戳direction
: 触发事件时屏幕的滚动方向,up
或down
disappear
如果一个位于某个可滚动区域内的组件被绑定了 disappear 事件,那么当这个组件被滑出屏幕变为不可见状态时,该事件将被触发。
type
:disappear
target
: 触发Disappear
事件的组件对象timestamp
: 事件被触发时的时间戳direction
: 触发事件时屏幕的滚动方向,up
或down
pagestart
pagestart 事件,会在 Web 页面开始加载时调用。
pagefinish
pagefinish 事件,会在 Web 页面完成加载时调用。
error
error 事件,会在 Web 页面加载失败时调用。
receivedtitle
receivedtitle 事件,会在 Web 页面的标题发生改变时调用(仅限 Android 平台)。
message
message 事件会在网页中有调用 `parent.postMessage` 方法的时候触发(在web中推荐使用`parent.postMessage`, 不然会有意想不到的效果),
方法
goBack
前往 WebView 历史记录的上一页。
goForward
前往 WebView 历史记录的下一页
reload
刷新当前 Web 页面
postMessage
发送消息到当前 <web>组件,可直接传对象,不需要转字符串,weex内部自动转了
injectJavascript
往网页中插入js代码,一般只有当传入 source 的时候才生效
不过,如果目标页面你可以控制,你可以往页面 插入如下一段代码,就可配合 src 使用,还能跨域(web)使用哦:
'use strict';window.addEventListener('message',function(a){try{var b=a.data;if('string'==typeof b)try{b=JSON.parse(a.data)}catch(f){}if(b.type)switch(b.type){case'_weex_webview_injectJavacript':{if(b.message){var c=document.createElement('script');c.innerHTML=b.message,document.body.appendChild(c)}break};case'_weex_webview_injectStyleSheet':{if(b.message){var d=document.createElement('style');d.innerHTML=b.message,document.body.appendChild(d)}break};default:}}catch(f){}});
由于 weex 现在还不支持 injectJavascript,这里算是不完美的 polyfill
Usage
webviewEl.injectJavascript(`
// some js code you want
alert('ok');
`);
injectStyleSheet
网页面中插入 css 样式,同 `injectJavascript` 用法一样
Usage
webviewEl.injectStyleSheet(`
h1 {
font-size: 36px;
color: red;
}
`);