plus是哪里来的问题
plus是5+Runtime的内部对象。
5+runtime内部内置了plus对象。
因为plus和mui不一样,plus是引擎级别的,不需要前端框架。而mui是前端框架,所以是要引入mui.js才能使用的。
不要在没有plus和mui的环境下调用相关API
普通浏览器里没有plus环境,只有HBuilder真机运行、打包后、或流应用环境下才能运行plus api。
在普通浏览器里运行时plus api时控制台必然会输出plus is not defined错误提示。
mui作为一个前端框架,你必须保证当前页面引入了mui.js。否则也会出现mui is not defined。
改造plus
引入plus.js,代码示例如下:
( function ( $, doc, win, wv_factory) {
if ( $. os. plus) { return ; }
if ( window. top !== self) { return ; }
$. ready ( function ( ) {
var styleElement = doc. createElement ( 'STYLE' ) ;
styleElement. innerHTML = '.mui-iframe-wrapper iframe{display: block;}.mui-iframe-wrapper{top: 45px; bottom: 50px;z-index:500;overflow: scroll;}' ;
styleElement. type = 'text/css' ;
doc. head. appendChild ( styleElement) ;
$. trigger ( doc, 'plusready' ) ;
} ) ;
$. prop_attr = ( function _attr ( ) {
return function ( ) {
var args = $. slice. call ( arguments) ,
s = args. length == 1 ? this : args. pop ( ) ;
if ( args. length == 1 ) {
if ( typeof ( args[ 0 ] ) == 'object' ) {
var a = args[ 0 ] ,
_self = _attr. call ( ) ;
for ( var i in a) {
( a. hasOwnProperty ( i) ) && _self. call ( s, i, a[ i] , s) ;
}
} else {
var prop = s[ args[ 0 ] ] ;
return prop !== undefined? prop: s. getAttribute&& s. getAttribute ( args[ 0 ] ) ;
}
} else {
if ( s[ args[ 0 ] ] !== undefined) {
s[ args[ 0 ] ] = args[ 1 ] ;
} else {
s. setAttribute&& s. setAttribute ( args[ 0 ] , args[ 1 ] ) ;
}
}
return s;
}
} ) ( ) ;
function url_2_id ( url) {
return url;
url = url. split ( /#|\?/g ) ;
var res = /.+[^\.]\b(\w+)\b/g . exec ( url[ 0 ] ) ;
if ( res) {
return res[ 1 ] ;
} else {
return url;
}
}
var has_remove = false ;
function get_iframe ( ) {
var iframe_wrapper = doc. createElement ( 'DIV' ) ,
iframe = doc. createElement ( 'IFRAME' ) ;
iframe_wrapper. className = 'mui-iframe-wrapper mui-hidden' ;
if ( ! has_remove) {
iframe_wrapper. remove = iframe_wrapper. remove? ( ( has_remove = true ) , iframe_wrapper. remove) : function ( ) {
var s = this , parent = s. parentNode;
if ( parent) {
return parent. removeChild ( s) ;
} else {
return this ;
}
}
}
iframe_wrapper. appendChild ( iframe) ;
return {
wrapper: iframe_wrapper,
iframe: iframe
} ;
}
var launch_id = url_2_id ( location. href) ,
webview_cache = ( function ( obj) {
var iframe_obj = get_iframe ( ) ;
Object. defineProperty ( iframe_obj. iframe, 'contentWindow' , {
get : function ( ) {
return win;
}
} ) ;
Object. defineProperty ( iframe_obj. iframe, 'contentDocument' , {
get : function ( ) {
return doc;
}
} ) ;
Object. defineProperty ( iframe_obj. iframe, 'src' , {
get : function ( ) {
return location. href;
} ,
set : function ( src) {
location. href = src;
}
} ) ;
$. prop_attr ( {
'data-loaded' : 0 ,
id: launch_id,
name: launch_id,
url: location. href,
} , iframe_obj. iframe) ;
$. ready ( function ( ) {
$. trigger ( iframe_obj. iframe, 'load' ) ;
} ) ;
obj[ launch_id] = new wv_factory ( iframe_obj. wrapper, iframe_obj. iframe, null , obj, '' , $, win) ;
return obj;
} ) ( { } ) ;
win. plus = {
device: {
dial: function ( tel) {
win. location. href = 'tel:' + tel;
}
} ,
key: { removeEventListener: $. noop, addEventListener: $. noop} ,
runtime: {
appid: launch_id,
quit: function ( ) {
win. location. href = 'about:blank' ;
}
} ,
webview: {
all: function ( ) {
var cache = webview_cache,
res = [ ] ;
for ( var i in cache) { res. push ( cache[ i] ) ; }
return res;
} ,
close: function ( id_wvobj, aniClose, duration, extras) {
if ( $. type ( id_wvobj) == 'string' ) {
id_wvobj = webview_cache[ id_wvobj] ;
if ( ! id_wvobj) { return ; }
}
id_wvobj. close ( ) ;
} ,
create: function ( url, id, styles, extras) {
url = url&& url. trim ( ) ;
if ( ! url) { return null ; }
var iframe_obj = get_iframe ( ) ;
id = url_2_id ( id|| url) ;
$. prop_attr ( {
'data-loaded' : 0 ,
src: url,
id: id,
name: id,
height: '100%' ,
allowTransparency: styles&& styles. background? styles. background. trim ( ) == 'transparent' : false ,
} , iframe_obj. iframe) ;
styles&& styles. zindex&& ( styles. zIndex = ( ~ ~ styles. zindex) + 500 ) ;
styles&& $. prop_attr ( styles, iframe_obj. wrapper. style) ;
doc. body. appendChild ( iframe_obj. wrapper) ;
return ( webview_cache[ id] = new wv_factory ( iframe_obj. wrapper, iframe_obj. iframe, extras, webview_cache, this . currentWebview ( ) . id, $, win) ) ;
} ,
currentWebview: function ( ) {
return webview_cache[ launch_id] ;
} ,
getDisplayWebview: function ( ) {
} ,
getWebviewById: function ( id) {
id = id. toString ( ) . trim ( ) ;
if ( id== '' ) { return null ; }
return webview_cache[ id] ;
} ,
getLaunchWebview: function ( ) {
return webview_cache[ launch_id] ;
} ,
getSecondWebview: function ( ) {
return null ;
} ,
getTopWebview: function ( ) {
} ,
hide: function ( id_wvobj, aniHide, duration, extras) {
if ( $. type ( id_wvobj) == 'string' ) {
id_wvobj = webview_cache[ id_wvobj] ;
if ( ! id_wvobj) { return ; }
}
id_wvobj. hide ( aniHide, duration, extras) ;
} ,
open: function ( url, id, styles, aniShow, duration, showedCB) {
var wv = webview_cache[ id] ;
if ( wv) {
destroyIframe ( id)
}
var wv = this . create ( url, id, styles) ;
wv. show ( aniShow, duration, showedCB) ;
return wv;
} ,
prefetchURL: function ( ) {
} ,
prefetchURLs: function ( ) {
} ,
show: function ( id_wvobj, aniShow, duration, showedCB, extras) {
if ( $. type ( id_wvobj) == 'string' ) {
id_wvobj = webview_cache[ id_wvobj] ;
if ( ! id_wvobj) { return ; }
}
id_wvobj. show ( aniShow, duration, showedCB, extras) ;
return id_wvobj;
} ,
startAnimation: function ( ) {
} ,
defaultHardwareAccelerated: function ( ) {
return false ;
}
} ,
nativeUI: ( function ( ) {
var mask = $. createMask ( function ( ) { return false ; } ) ,
styleElement = doc. createElement ( 'STYLE' ) ;
$. prop_attr ( {
className: 'mui-backdrop native-waiting' ,
innerHTML: '<div><div class="mui-spinner"><svg class="icon" style="width: 100%; height: 100%;vertical-align: middle;fill: #FFF;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1426"><path d="M272 704a47.84 47.84 0 0 0-33.936 14.064l-96 96a48 48 0 1 0 67.872 67.872l96-96A48 48 0 0 0 272 704z m-48-192a48 48 0 0 0-48-48H48a48 48 0 1 0 0 96h128a48 48 0 0 0 48-48z m-14.064-369.936a48 48 0 1 0-67.872 67.872l96 96a48 48 0 1 0 67.872-67.872l-96-96zM752 320a47.84 47.84 0 0 0 33.936-14.064l96-96a48 48 0 1 0-67.872-67.872l-96 96A48 48 0 0 0 752 320z m33.936 398.064a48 48 0 1 0-67.872 67.872l96 96a48 48 0 1 0 67.872-67.872l-96-96zM512 800a48 48 0 0 0-48 48v128a48 48 0 1 0 96 0v-128a48 48 0 0 0-48-48z m464-336h-128a48 48 0 1 0 0 96h128a48 48 0 1 0 0-96zM512 0a48 48 0 0 0-48 48v128a48 48 0 1 0 96 0V48a48 48 0 0 0-48-48z" fill="" p-id="1427"></path></svg></div><p></p></div>'
} , mask[ 0 ] ) ;
var mask_title = mask[ 0 ] . querySelector ( 'p' ) ;
$. prop_attr ( {
type: 'text/css' ,
innerHTML: '.mui-backdrop.native-waiting{text-align:center;font-size:0px;}' +
'.mui-backdrop.native-waiting:before{content: \'\';display: inline-block;vertical-align: middle;height: 100%;}' +
'.mui-backdrop.native-waiting>div{display:inline-block;text-align:center;vertical-align:middle;}' +
'.mui-backdrop.native-waiting p{margin: 10px 0px;color:#FFF;}' +
'.mui-backdrop.native-waiting .mui-spinner{width: 30px;height: 30px;}' +
'.mui-backdrop.native-waiting .mui-spinner:after{display:none;}'
} , styleElement) ;
$. ready ( function ( ) {
doc. head. appendChild ( styleElement) ;
} ) ;
return {
showWaiting: function ( title, option) {
mask_title. innerText = title|| '' ;
mask. show ( ) ;
} ,
closeWaiting: mask. _remove
}
} ) ( ) ,
navigator: { closeSplashscreen: $. noop} ,
net: {
XMLHttpRequest: function ( ) {
return new win. XMLHttpRequest ( ) ;
}
}
} ;
} ) ( mui, document, window, function ( wrapper, iframe, extras, webview_cache, opener_id, $, win) {
function webview ( iframe, extras) {
this . id = iframe. id;
$. type ( extras) == 'object' && ! $. isEmptyObject ( extras) && $. extend ( this , extras) ;
}
var wv_prop = webview. prototype,
is_loaded = ~ ~ iframe. getAttribute ( 'data-loaded' ) ,
after_load = function ( callback) {
if ( is_loaded) {
callback. call ( iframe) ;
} else {
iframe. addEventListener ( 'load' , function iframe_load ( ) {
this . removeEventListener ( 'load' , iframe_load) ;
this . setAttribute ( 'data-loaded' , 1 ) ;
is_loaded = 1 ;
callback. call ( this ) ;
} ) ;
}
} ;
after_load ( function ( ) {
var iframe_win = this . contentWindow,
win_plus = win. top. plus;
if ( iframe_win. plus) { return ; }
iframe_win. plus = $. extend ( true , { } , win_plus) ;
iframe_win. plus. net. XMLHttpRequest = function ( ) {
return new iframe_win. XMLHttpRequest ( ) ;
} ;
iframe_win. plus. webview. currentWebview = function ( ) {
return webview_cache[ iframe. id] ;
} ;
var fixed_height = ( function ( height) {
var iframe_doc = this . contentDocument;
iframe_doc. head. appendChild ( $. prop_attr ( {
innerHTML: 'html{height: ' + ( height? ( height+ 'px' ) : '100%' ) + ';width: 100%;overflow: hidden;}body,body>.mui-content{height: 100%;width: 100%;overflow: auto;}' ,
type: 'text/css'
} , iframe_doc. createElement ( 'style' ) ) ) ;
} ) . bind ( this ) ;
if ( $. os. ios) {
fixed_height ( ) ;
} else {
setTimeout ( ( function ( ) {
( iframe. offsetHeight!= wrapper. offsetHeight) && fixed_height ( wrapper. offsetHeight) ;
} ) . bind ( this ) , 0 ) ;
}
$. trigger ( this . contentDocument, 'plusready' ) ;
} ) ;
iframe. addEventListener ( 'error' , function iframe_error ( ) {
this . removeEventListener ( 'error' , iframe_error) ;
} ) ;
wv_prop. addEventListener = function ( ) {
var args = $. slice. call ( arguments) ;
after_load ( function ( ) {
this . contentWindow. addEventListener. apply ( this . contentWindow, args) ;
} ) ;
}
wv_prop. removeEventListener = function ( ) {
var args = $. slice. call ( arguments) ;
after_load ( function ( ) {
this . contentWindow. removeEventListener. apply ( this . contentWindow, args) ;
} ) ;
}
var children_wv = [ ] ,
parent = null ;
wv_prop. append = function ( webview) {
var parent = webview. parent ( ) ;
if ( parent&& parent. id) {
return ;
} ;
webview. parent. prototype. parent = this . id;
children_wv. push ( webview) ;
} ;
wv_prop. parent = function ( ) {
return parent? webview_cache[ parent] : null ;
}
Object. defineProperty ( wv_prop. parent. prototype, 'parent' , {
set : function ( value) { parent = value; } ,
get : function ( ) { return parent; }
} ) ;
wv_prop. appendJsFile = function ( ) {
}
wv_prop. animate = function ( ) {
}
wv_prop. back = function ( ) {
after_load ( function ( ) {
this . evalJS ( 'history.go(-1);' ) ;
} . bind ( this ) ) ;
}
wv_prop. beginPullToRefresh = function ( ) {
}
wv_prop. setPullToRefresh = function ( ) {
}
wv_prop. endPullToRefresh = function ( ) {
}
wv_prop. canBack = function ( queryCallback) {
queryCallback ( { canBack: iframe. contentWindow. history. length > 1 } ) ;
}
wv_prop. canForward = function ( queryCallback) {
}
wv_prop. checkRenderedContent = function ( options, successCallback, errorCallback) {
}
wv_prop. children = function ( ) {
return children_wv;
}
wv_prop. clear = function ( ) {
iframe. contentWindow. location. replace ( 'about:blank' ) ;
}
wv_prop. close = function ( aniClose, duration, extras) {
wrapper. classList. add ( 'mui-hidden' ) ;
wrapper. remove ( ) ;
children_wv. forEach ( function ( child) {
child. close ( ) ;
} ) ;
delete webview_cache[ this . id] ;
}
wv_prop. drag = function ( options, otherView, callback) {
}
wv_prop. draw = function ( bitmap, successCallback, errorCallback, options) {
}
wv_prop. evalJS = function ( js) {
after_load ( function ( ) {
this . contentWindow. location. href = 'javascript:' + js+ ';' ;
} ) ;
}
wv_prop. forward = function ( ) {
this . evalJS ( 'history.forward()' ) ;
}
wv_prop. getFavoriteOptions = function ( ) {
}
wv_prop. getShareOptions = function ( ) {
}
wv_prop. getStyle = function ( ) {
var style_str = wrapper. getAttribute ( 'style' ) ;
if ( style_str) {
var style_obj = { } ;
style_str. split ( ';' ) . forEach ( function ( sub_str) {
sub_str = sub_str. trim ( ) . split ( ':' ) . map ( function ( str) {
return str. trim ( ) ;
} ) ;
if ( ! sub_str[ 0 ] ) { return ; }
if ( sub_str[ 0 ] == 'z-index' ) {
this . zindex = sub_str[ 1 ] - 500 ;
} else {
style_obj[ sub_str[ 0 ] ] = sub_str[ 1 ] ;
}
} , style_obj) ;
return style_obj;
} else {
return { }
}
}
wv_prop. getSubNViews = function ( ) {
}
wv_prop. getTitle = function ( ) {
return iframe. contentDocument. title;
}
wv_prop. getTitleNView = function ( ) {
return '' ;
}
wv_prop. getURL = function ( ) {
return iframe. src;
}
wv_prop. hide = function ( aniHide, duration, extras) {
after_load ( function ( ) {
wrapper. classList. add ( 'mui-hidden' ) ;
this . contentDocument. activeElement. blur ( ) ;
$. trigger ( this . contentDocument, 'hide' ) ;
} ) ;
}
wv_prop. interceptTouchEvent = function ( intercept) {
}
wv_prop. isHardwareAccelerated = function ( intercept) {
return false ;
}
wv_prop. isVisible = function ( intercept) {
return ! wrapper. classList. contains ( 'mui-hidden' ) ;
}
wv_prop. listenResourceLoading = function ( options, callback) {
}
wv_prop. loadData = function ( options, callback) {
}
wv_prop. loadURL = function ( options, callback) {
}
wv_prop. opened = function ( ) {
var id = this . id,
res = [ ] ;
for ( var wv_id in webview_cache) {
var opener = webview_cache[ wv_id] . opener ( ) ;
opener&& ( id == opener. id) && res. push ( webview_cache[ wv_id] ) ;
}
return res;
}
wv_prop. opener = function ( ) {
return webview_cache[ opener_id] ;
}
wv_prop. overrideResourceRequest = function ( options) {
}
wv_prop. overrideUrlLoading = function ( options, callback) {
}
wv_prop. reload = function ( force) {
after_load ( function ( ) {
this . contentWindow. location. reload ( ) ;
} ) ;
}
wv_prop. resetBounce = function ( ) {
}
wv_prop. restore = function ( ) {
}
wv_prop. remove = function ( webview) {
for ( var i = children_wv. length - 1 , id = webview. id, index = 0 ; i >= 0 ; i-- ) {
if ( children_wv[ i] . id == id) {
var wv = children_wv. splice ( i, 1 ) ;
wv[ 0 ] . parent. prototype. parent = null ;
break ;
}
}
}
wv_prop. removeFromParent = function ( ) {
parent&& webview_cache[ parent] . remove ( this ) ;
}
wv_prop. setBounce = function ( ) {
}
wv_prop. setBlockNetworkImage = function ( ) {
}
wv_prop. setContentVisible = function ( visible) {
iframe. classList[ visible? 'remove' : 'add' ] ( 'mui-hidden' ) ;
}
wv_prop. setFavoriteOptions = function ( ) {
}
wv_prop. setRenderedEventOptions = function ( ) {
}
wv_prop. setStyle = function ( styles) {
styles&& styles. zindex&& ( styles. zIndex = ( ~ ~ styles. zindex) + 500 ) ;
styles&& $. prop_attr ( styles, wrapper. style) ;
styles&& styles. background&& $. prop_attr ( {
allowTransparency: styles. background. trim ( ) == 'transparent' ,
} , iframe) ;
}
wv_prop. setShareOptions = function ( options) {
}
wv_prop. setJsFile = function ( path) {
}
wv_prop. setCssFile = function ( path) {
}
wv_prop. setCssText = function ( path) {
}
wv_prop. setVisible = function ( visible) {
wrapper. style. visibility = visible? 'visible' : 'hidden' ;
}
wv_prop. setFixBottom = function ( height) {
}
wv_prop. show = function ( aniShow, duration, showedCB, extras) {
after_load ( function ( ) {
wrapper. classList. remove ( 'mui-hidden' ) ;
$. slice. call ( win. top. frames) . forEach ( $. os. ios? function ( frames) {
} : function ( frames) {
var active = frames. document. activeElement;
active&& active. blur ( ) ;
} ) ;
$. trigger ( this . contentDocument, 'show' ) ;
if ( showedCB&& $. type ( showedCB) == 'function' ) {
wrapper. classList. remove ( 'mui-hidden' ) ;
showedCB. call ( win) ;
}
} ) ;
}
wv_prop. showBehind = function ( ) {
}
wv_prop. stop = function ( ) {
}
wv_prop. updateSubNViews = function ( ) {
}
var event = [
{
name: 'onclose' ,
callback: $. noop,
event_name: 'close'
} ,
{
name: 'onerror' ,
callback: $. noop,
event_name: 'error'
} ,
{
name: 'onloaded' ,
callback: $. noop,
event_name: 'load'
} ,
{
name: 'onloading' ,
callback: $. noop,
event_name: 'loading'
}
] ;
event. forEach ( function ( obj, index) {
Object. defineProperty ( wv_prop, obj. name, {
set : function ( value) {
event[ index] . callback = value;
} ,
get : function ( ) {
return event[ index] . callback
}
} ) ;
} ) ;
return new webview ( iframe, extras) ;
} ) ;
function destroyIframe ( iframeID) {
var iframe = document. getElementById ( iframeID) ;
iframe. src = 'about:blank' ;
try {
iframe. contentWindow. document. write ( '' ) ;
iframe. contentWindow. document. clear ( ) ;
} catch ( e) { }
iframe. parentNode. removeChild ( iframe) ;
}