O2OA API

Namespace

o2

Summary

平台全局对象,在前端(浏览器/移动端H5页面)可用。

Members

static

versionObject

平台版本信息。

Type

  • Object

Syntax

//获取版本号
var v = o2.version.v;

Source

static

sessionObject

平台运行环境。

Type

  • Object

Properties

  • isDebugger Boolean

    是否是调试模式

  • isMobile Boolean

    是否是移动端环境

Syntax

var debuggerMode = o2.session.isDebugger;
var ismobile = o2.session.isMobile;

Source

static

languageString

语言环境名称。

Type

  • String

Syntax

var lp = o2.language;

Source

Methods

static

typeOf(objopt) → {String}

判断一个任意参数的类型。

Syntax

o2.typeOf(obj);

Parameters

  • obj Object <optional>

    要检查的对象

Returns

  • String

    对象的类型,返回值:

    'element' - 如果obj是一个DOM Element对象.
    'elements' - 如果obj是一个Elements实例.
    'textnode' - 如果obj是一个DOM text节点.
    'whitespace' - 如果obj是一个DOM whitespace 节点.
    'arguments' - 如果obj是一个arguments对象.
    'array' - 如果obj是一个array数组.
    'object' - 如果obj是一个object对象.
    'string' - 如果obj是一个string.
    'number' - 如果obj是一个数字number.
    'date' - 如果obj是一个日期date.
    'boolean' - 如果obj是一个布尔值boolean.
    'function' - 如果obj是一个function.
    'regexp' - 如果obj是一个正则表达式.
    'collection' - 如果obj是一个原生HTML elements collection, 如childNodes or getElementsByTagName获取的对象.
    'window' - 如果obj是window对象.
    'document' - 如果obj是document对象.
    'domevent' - 如果obj是一个event.
    'null' - 如果obj是undefined, null, NaN 或者 none.
    

Example

var myString = 'hello';
o2.typeOf(myString); // returns "string"

Source

static

filterUrl(urlopt) → {String}

解析平台内的url,如果配置了反向代理的路径转发,平台内的url需要通过filterUrl解析后,才能得到正确的url。

Syntax

var url = o2.filterUrl(url);

Parameters

  • url String <optional>

    要解析的url

Returns

  • String

    解析后的url

Example

当我们配置了按路径转发后,在portal.json中配置了urlMapping如:

"urlMapping": {
     "qmx.o2oa.net:20020": "qmx.o2oa.net/dev/app",
     "qmx.o2oa.net:20030": "qmx.o2oa.net/dev/center"
},
在获取平台内部的url时,如附件的下载地址,需要通过filterUrl解析。

var attachmentUrl = "http://qmx.o2oa.net:20020/x_processplatform_assemble_surface/jaxrs/attachment/{attid}/work/{workid}";
var url = o2.filterUrl(attachmentUrl);
//return "http://qmx.o2oa.net/dev/app/x_processplatform_assemble_surface/jaxrs/attachment/{attid}/work/{workid}"

Source

static

load(urlsopt, options|callbackopt, callbackopt)

引入外部javascript文件。

Syntax

o2.load(urls, options, callback);

Parameters

  • urls String | Array <optional>

    要载入的js文件url,或要载入多个js问价的urls数组。

  • options|callback Object | function <optional>

    载入js文件的配置参数,或者载入成功后的回调。

    options参数格式如下:
    {
         "noCache":  是否使用缓存,默认true,
         "reload":   如果相同路径的js文件已经加载了,是否重新载入,默认为:false
         "sequence": 当urls参数为数组时,多个脚本文件是否按数组顺序依次载入,默认为false
         "type":     载入脚本的类型,默认为"text/javascript"
         "baseUrl":  要载入脚本的url的base路径,默认""
         "doc":      要在哪个document对象中载入脚本文件,默认为当前document
    }
    
  • callback function <optional>

    可选参数,载入成功后的回调方法。

Example

//载入jsfile1.js和js/jsfile2.js两个文件,它们是按顺序载入的
o2.load(["js/jsfile1.js", "js/jsfile2.js"], function(){
    //js文件已经载入
});

//载入jsfile1.js和js/jsfile2.js两个文件,它们是同时载入的
//并且无论是否已经加载过,都需要重新加载,并且要按顺序加载
o2.load(["js/jsfile1.js", "js/jsfile2.js"], {"reload": true, "sequence": true}, function(){
    //js文件已经载入
});

Source

static

loadCss(urlsopt, options|callbackopt, callbackopt)

引入外部css资源。

Syntax

o2.loadCss(urls, options, callback);
Element.loadCss(urls, options, callback);

Parameters

  • urls String | Array <optional>

    要载入的css文件url,或要载入多个css文件的urls数组。

  • options|callback Object | function <optional>

    载入css文件的配置参数,或者载入成功后的回调。

    options参数格式如下:
    {
         "noCache":  是否使用缓存,默认true,
         "reload":   如果相同路径的css文件已经引入了,是否重新载入,默认为:false
         "sequence": 当urls参数为数组时,多个css文件是否按数组顺序依次载入,默认为false
         "dom":      dom element对象,表示css在这个element生效,默认是null,表示对整个document生效
    }
    
  • callback function <optional>

    可选参数,载入成功后的回调方法。

Example

//载入style1.css和style2.css两个文件,作用于document
o2.loadCss(["../css/style1.css", "../css/style2.css"], function(){
    //css文件已经载入
});

//载入style1.css和style2.css两个文件,作用于id为content的dom对象
o2.loadCss(["../css/style1.css", "../css/style2.css"], {"dom": document.getELementById("content")}, function(){
    //css文件已经载入
});
//在Dom对象上载入style1.css和style2.css两个css
var node = document.getElementById("mydiv");
node.loadCss(["../css/style1.css", "../css/style2.css"], function(){
    //css文件已经载入
});

Source

static

loadCssText(cssTextopt, options|callbackopt, callbackopt)

引入文本css资源。

Syntax

o2.loadCssText(cssText, options, callback);
Element.loadCssText(cssText, options, callback);

Parameters

  • cssText String <optional>

    要载入的css文本内容。

  • options|callback Object | function <optional>

    载入css文件的配置参数,或者载入成功后的回调。

    options参数格式如下:
    {
         "dom":      dom element对象,表示css在这个element生效,默认是null,表示对整个document生效
    }
    
  • callback function <optional>

    可选参数,载入成功后的回调方法。

Example

//引入css文本,作用于id为content的dom对象
var csstext = ".myclass{color:#ff0000}"
o2.loadCssText(csstext, {"dom": document.getELementById("content")}, function(){
    //css已经载入
});
//引入css文本,作用于id为content的dom对象
var csstext = ".myclass{color:#ff0000}"
var node = document.getELementById("content");
node.loadCssText(csstext, function(){
    //css已经载入
});

Source

static

removeCss(urlsopt)

移除通过o2.loadCss方法引入css资源。

Syntax

o2.removeCss(urls);

Parameters

  • urls String | Array <optional>

    要移除的的css文本url,必须与引入时所使用的url相同。

Example

//载入style1.css和style2.css两个文件,作用于id为content的dom对象
o2.load(["../css/style1.css", "../css/style2.css"], {"dom": document.getELementById("content")}, function(){
    //css文件已经载入
});

//移除style1.css和style2.css两个文件
//引入时使用了"../css/style1.css"字符串作为路径,移除时也要使用相同的字符串
o2.removeCss(["../css/style1.css", "../css/style2.css"])

Source

static

loadHtml(urlsopt, options|callbackopt, callbackopt)

引入外部html模板资源,并将html内容渲染到指定dom对象的某个位置。

Syntax

o2.loadHtml(urls, options, callback);
Element.loadHtml(urls, options, callback);

Parameters

  • urls String | Array <optional>

    要载入的html文件url,或要载入多个html文件的urls数组。

  • options|callback Object | function <optional>

    载入html文件的配置参数,或者载入成功后的回调。

    options参数格式如下:
    {
          "noCache":  是否使用缓存,默认true,
          "reload":   如果相同路径的html文件已经引入了,是否重新载入,默认为:false
          "sequence": 当urls参数为数组时,多个html文件是否按数组顺序依次载入,默认为false
          "dom": 引入html后,要将html内容渲染到的目标dom对象(具体位置由position参数确定),
          "position": 渲染到的目标dom对象的位置,可以是以下值:'beforebegin' 'afterbegin' 'beforeend'(默认) 'afterend'
          "module": Object,与此html模板关联的对象。(在下面的例子中详细介绍)
          "bind": Json,与此html模板关联的Json对象。(在下面的例子中详细介绍)
          "evalScripts": html模板中通过<script>引入或内嵌的javascript,是否要执行。默认为false
          "baseUrl": html模板中引用连接的baseUrl,默认为空
    }
    
  • callback function <optional>

    可选参数,载入成功后的回调方法。

Examples

样例1: 引入一个html模板文件,并插入到id为content的dom对象的最后

//引入一个html模板文件,并插入到id为content的dom对象的最后
var node = document.getELementById("content");
o2.loadHtml("../html/template.html", {"dom": node}, function(){
    //html文件已经载入
});

//或者使用Element.loadHtml方法
var node = document.getELementById("content");
node.loadHtml("../html/template.html", function(){
    //html文件已经载入
});

样例2: 本例中我们使用一个html模板来渲染展现已有的数据。我们将一个json对象绑定到要载入的模板,通过{{$.xxx}}来展现json数据。
html模板内容如下:

<div>{{$.title}}</div>
<div>{{$.description}}</div>
然后通过以下代码来载入html模板:

var json = {
    "title": "这是标题",
    "description": "描述内容"
};
var node = document.getELementById("content");
o2.loadHtml("../html/template.html", {"dom": node, "bind": json}, function(){
    //html文件已经载入
    //载入后,node对象的html如下:
    //<div>
    //   ......
    //   <div>这是标题</div>;
    //   <div>描述内容</div>
    //</div>
});

样例3: 本例中我们除了使用一个html模板来渲染展现已有的json数据,还给已有模块绑定上html模板中的一个dom对象,并监听html模板中的指定元素的事件。
html模板内容如下:

<div>{{$.title}}</div>
<div>{{$.description}}</div>
<div data-o2-element="myElement"></div>
<button data-o2-events="click:clickMe:{{$.info}};mouseover:overMe;mouseout:outMe">绑定了事件的按钮</button>
然后通过以下代码来载入html模板:

//json数据
var json = {
    "title": "这是标题",
    "description": "描述内容",
    "info": "按钮点击后的信息"
};
//业务模块
var module = {
    //当button按钮被点击时,会调用此方法
    clickMe: function(info, e){
        this.myElement.insertAdjacentText("afterbegin", "button clicked " + info);
    },
    //当鼠标移动到button按钮时,会调用此方法
    overMe: function(e){
        console.log("button over");
        console.log(e);  //MouseEvent对象
    },
    //当鼠标移出button按钮时,会调用此方法
    outMe: function(e){
        console.log("button out");
        console.log(e);  //MouseEvent对象
    }
};

var node = document.getELementById("content");
node.loadHtml("../html/template.html", {"bind": json, "module": module}, function(){
    //html文件已经载入
    //载入后,node对象的html如下:
    //<div>
    //   ......
    //   <div>这是标题</div>;
    //   <div>描述内容</div>
    //   <div data-o2-element="myElement"></div>
    //   <button>绑定了事件的按钮</button>
    //</div>
    console.log(module.myElement);   //Dom对象:<div data-o2-element="myElement"></div>
                                     //html模板中的div对象,被绑定到了module对象的myElement属性上

});

样例4: 本例中演示了html模板中each和if的用法。
html模板内容如下:

<div>
   {{each $.items}}
       <div>{{$.title}}</div>
       <div>{{$.description}}</div>
       {{if $.title=="这是标题2"}}
            <div>这是标题2的个性化内容</div>
       {{end if}}
       <button data-o2-events="click:clickMe:{{$.info}}">绑定了事件的按钮</button>
       <hr>
   {{end each}}
</div>
然后通过以下代码来载入html模板:

//json数据
var json = {
      "items": [{
          "title": "这是标题1",
          "description": "描述内容1",
          "info": "按钮点击后的信息1"
      },{
          "title": "这是标题2",
          "description": "描述内容2",
          "info": "按钮点击后的信息2"
      },{
          "title": "这是标题3",
          "description": "描述内容3",
          "info": "按钮点击后的信息3"
      }]
};
//业务模块
var module = {
    //当button按钮被点击时,会调用此方法
    clickMe: function(info, e){
        alert(info);
    }
};
var node = document.getELementById("content");
node.loadHtml("../html/template.html", {"bind": json, "module": module}, function(){
    //html文件已经载入
    //载入后,node对象的html如下:
    //<div>
    //   <div>这是标题1</div>;
    //   <div>描述内容1</div>
    //   <button>绑定了事件的按钮</button>
    //   <hr>
    //</div>
    //<div>
    //   <div>这是标题2</div>;
    //   <div>描述内容2</div>
    //   <div>描这是标题2的个性化内容</div>
    //   <button>绑定了事件的按钮</button>
    //   <hr>
    //</div>
    //<div>
    //   <div>这是标题3</div>;
    //   <div>描述内容3</div>
    //   <button>绑定了事件的按钮</button>
    //   <hr>
    //</div>
    //当点击按钮时,会alert对应的items的info数据
});

Source

static

loadHtmlText(htmlopt, optionsopt)

解析html文本内容,并将html内容渲染到指定dom对象的某个位置,与loadHtml相同,只是传入html内容,而不是获取html的url。

Syntax

o2.loadHtmlText(html, options);
Element.loadHtmlText(html, options);

Parameters

  • html String <optional>

    要解析的html文本内容。

  • options Object <optional>

    载入html文件的配置参数。

    options参数格式如下:
    {
          "noCache":  是否使用缓存,默认true,
          "reload":   如果相同路径的html文件已经引入了,是否重新载入,默认为:false
          "sequence": 当urls参数为数组时,多个html文件是否按数组顺序依次载入,默认为false
          "dom": 引入html后,要将html内容渲染到的目标dom对象(具体位置由position参数确定),
          "position": 渲染到的目标dom对象的位置,可以是以下值:'beforebegin' 'afterbegin' 'beforeend'(默认) 'afterend'
          "module": Object,与此html模板关联的对象。(在下面的例子中详细介绍)
          "bind": Json,与此html模板关联的Json对象。(在下面的例子中详细介绍)
          "evalScripts": html模板中通过<script>引入或内嵌的javascript,是否要执行。默认为false
          "baseUrl": html模板中引用连接的baseUrl,默认为空
    }
    

Example

var html = "<div>{{$.title}}</div>"
var json = {"title": "标题"};
var node = document.getELementById("content");
o2.loadHtmlText(html, {"dom": node, "bind": json});

//获
node.loadHtmlText(html, {"bind": json});

Source

static

loadAll(modulesopt, optionsopt, callbackopt)

同时载入js文件、css文件和html模板文件,相当于同时调用了o2.load, o2.loadCss 和 o2.loadHtml。

Syntax

o2.loadAll(modules, options, callback);
Element.loadAll(modules, options, callback);

Parameters

  • modules Object <optional>

    要解析的html文本内容。

    modules参数格式如下:
    {
          "js": {String|Array} 要载入的js文件url,或要载入多个js文件的urls数组。
          "css": {String|Array} 要载入的css文件url,或要载入多个css文件的urls数组。
          "html": {String|Array} 要载入的html文件url,或要载入多个html文件的urls数组。
    }
    
  • options Object <optional>

    载入html文件的配置参数。

    options参数格式如下:
    {
          "noCache":  是否使用缓存,默认true,
          "reload":   如果相同路径的html文件已经引入了,是否重新载入,默认为:false
          "sequence": 当urls参数为数组时,多个html文件是否按数组顺序依次载入,默认为false
          "dom": 引入html后,要将html内容渲染到的目标dom对象(具体位置由position参数确定),
          "position": 渲染到的目标dom对象的位置,可以是以下值:'beforebegin' 'afterbegin' 'beforeend'(默认) 'afterend'
          "module": Object,与此html模板关联的对象。(在下面的例子中详细介绍)
          "bind": Json,与此html模板关联的Json对象。(在下面的例子中详细介绍)
          "evalScripts": html模板中通过<script>引入或内嵌的javascript,是否要执行。默认为false
          "baseUrl": html模板中引用连接的baseUrl,默认为空
    }
    
  • callback function <optional>

    可选参数,载入成功后的回调方法。

Example

var html = "<div>{{$.title}}</div>"
var json = {"title": "标题"};
var node = document.getELementById("content");
o2.loadAll({
    "js": ["file1.js", "file2.js"],
    "css": ["style.css"],
    "html": "template.html",
}, {"dom": node, "bind": json}, function(){
    //载入完成后的回调
});

Source

static

getDateFromServer(async|callbackopt) → {Date|Promise}

从服务器获取当前时间。

Syntax

o2.getDateFromServer(async);
Date.getFromServer(async);

Parameters

  • async|callback Boolean | function <optional>

    可选,如果传入true或一个Function:表示异步调用此方法,传入的function为回调方法。如果省略此参数或传入false,则为同步方法

Returns

  • Date Promise

    同步调用时,返回获取到的时间Date;异步调用时,返回Promise。

Example

//同步获取服务器时间
var d = o2.getDateFromServer();
//或者
var d = Date.getFromServer();

//通过回调方法异步获取服务器时间
o2.getDateFromServer(function(d){
    console.log(d);  //从服务器获取的当前时间
});
//或者
Date.getFromServer(function(d){
    console.log(d);  //从服务器获取的当前时间
});

//通过Promise异步获取服务器时间
o2.getDateFromServer(true).then((d)=>{
    console.log(d);  //从服务器获取的当前时间
});
//或者
Date.getFromServer(true).then((d)=>{
    console.log(d);  //从服务器获取的当前时间
});

Source

static

zoom(scaleopt)

对页面进行缩放。

Syntax

o2.zoom(scale);

Parameters

  • scale Number <optional>

    缩放的比例。1表示原始大小

Example

//将页面放大到150%大小
o2.zoom(1.5);

Source

results matching

    No results matching ''