windowContainer组件

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

目录

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

一. 综述

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

二. DOM结构

• 典型dom结构

<div component="$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对象

//在container节点下动态创建windowContainer组件
 new WindowContainer({
     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

//代码设置src后需要主动调用refresh
var windowContainer = this.comp("windowContainer");
var src = require.toUrl("$UI/system/components/justep/windowContainer/demo/inner3.w");
windowContainer.set({src:src})
windowContainer.refresh();

• get

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

> 参数

name 属性名，参考组件属性

> 返回值

void

//获取组件设置的src属性
var src =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

 //在主页面调用inner1页面的inner1方法
 this.comp("windowContainer").getInnerModel().inner1();

六. 事件

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

event结构如下：

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

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

event结构如下：

{
"source": this, //组件自身
"err": err //错误对象
"cancel": false //是否取消后续处理
}

七. 操作

• （无）

八. 案例

1、嵌入w页面

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

<div component="$UI/system/components/justep/windowContainer/windowContainer"
  xid="windowContainer" src="inner1.w"/>

2、通过iframe嵌入非w页面

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

<iframe src="http://m.baidu.com" xid="iframe1" frameborder="false"
  height="100%" width="100%"/>
</iframe>

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

代码参考构造方法

运行效果如下：