windowContainer组件

windowContainer组件

windowContainer组件，用来嵌套其他w页。

目录

一、综述
二、DOM结构
三、样式
四、属性
五、方法
六、事件
七、操作
八、案例

一. 综述

windowContainer组件加载w页，使开发者快速完成嵌套页面的开发。

二. DOM结构

• 典型dom结构

1

2

<divcomponent="$UI/system/components/justep/windowContainer/windowContainer"

  xid="windowContainer"src="inner1.w"/>  

三. 样式

• （无）

四. 属性

组件具有公共属性，请参考组件公共属性

• src

[string]嵌入页路径

• process

[string]嵌入页使用的process，默认使用当前环境的

• activity

[string]嵌入页使用的activity，默认使用当前环境的

五. 方法

组件具有公共方法，请参考组件公共方法

• 构造方法

new WindowContainer(cfg)
动态创建windowContainer组件

> 参数

cfg创建组件所需要的初始化属性，参考组件属性

> 返回值

windowContainer对象

> 例:

1

2

3

4

5

6

7

8

9

//在container节点下动态创建windowContainer组件

 newWindowContainer({

     parentNode : this.getElementByXid("div1"),

     src : require.toUrl("$UI/system/components/justep/windowContainer/demo/inner3.w"),

     onLoadError:function(err){

         alert("加载出错")

         err.cancel = false;

 }

 });

• set

void set(name,val)
设置组件的非只读属性

> 参数

name:组件的非只读属性名，参考组件属性
val:对应的属性值

> 返回值

void

> 例:

1

2

3

4

5

//代码设置src后需要主动调用refresh

varwindowContainer = this.comp("windowContainer");

varsrc = require.toUrl("$UI/system/components/justep/windowContainer/demo/inner3.w");

windowContainer.set({src:src})

windowContainer.refresh();

• get

object get (name)
获取组件的属性值

> 参数

name 属性名，参考组件属性

> 返回值

void

> 例:

1

2

//获取组件设置的src属性

varsrc =this.comp("windowContainer").get("src");

• refresh

void refresh()
重新加载window页面

> 参数

无

> 返回值

void

> 例:

见set方法

• setSrc

void setSrc (url)
设置组件的src属性

> 参数

url src属性值

> 返回值

void

• setProcess

void setProcess(process)
设置组件的process属性值

> 参数

process process属性值

> 返回值

void

• setActivity

void setActivity(activity)
设置组件的activity属性值

> 参数

activity activity属性值

> 返回值

void

• getInnerModel

modelBase getInnerModel()
获取子页面的VM, 即子页面对应的js文件定义的类的实例。

> 参数

无

> 返回值

modelBase

> 例:

1

2

//在主页面调用inner1页面的inner1方法

this.comp("windowContainer").getInnerModel().inner1();

六. 事件

• void onBeforeLoad(object event) 子页面加载前事件

event结构如下：

1

2

3

{

 "source": this,//组件自身

}

• void onLoadError(object event)子页面加载出错事件

event结构如下：

1

2

3

4

5

{

"source":this,//组件自身

"err": err //错误对象

"cancel":false//是否取消后续处理

}

七. 操作

• （无）

八. 案例

1、嵌入w页面

windowContainer的配置如下，在父页面加载的时候，同时加载嵌入页。

1

2

<divcomponent="$UI/system/components/justep/windowContainer/windowContainer"

  xid="windowContainer"src="inner1.w"/>

2、通过iframe嵌入非w页面

windowContainer不支持直接嵌入html页，需要先新建一个w页，用iframe把html页嵌进来。

1

2

3

<iframesrc="http://m.baidu.com"xid="iframe1"frameborder="false"

  height="100%"width="100%"/>

</iframe>

3、动态创建windowContainer嵌入子页面

代码参考构造方法

运行效果如下：