常见页面操作

简介

这个框架采用的是iframe方式组织主页和子页面的，所以有很多操作需要跨iframe执行，所以开放了一些接口，框架中的页面操作有以下几种：

打开页面
关闭页面
刷新页面
更改页面（tab)的标题

本页面只做API接口的说明和实现的机制，具体的示例，在其他页面中展示。

API接口

在框架页上开放的接口，是跨iframe实现的，注意跨域问题。

openPage : 打开页面，或者跳转页面，用以一个参数： pageInfo,是一个键值对
1. moduleId : 默认为当前模块（一般不用指定），模块id,对应一级导航的id，在配置菜单时指定
2. id: 打开页面的id,此处id 唯一标示页面，如果已经打开过同id的页面，会跳转到页面。如果左侧有对应id的菜单，会定位到菜单。
3. title：页面标题
4. href : 页面的链接地址
5. reload: 如果页面已经打开，是否重新加载，默认为false
6. search : 搜索条件，打开页面时附加的搜索条件/li>
7. isClose : 打开新页面后，当前页是否关闭,默认为false
closePage : 关闭一个页面。参数如下：
1. id : 页面Id,打开页面时指定的id，默认为当前页面
2. moduleId：模块id(可以为空）
reloadPage : 刷新页面,参数如下：
1. id : 页面Id,打开页面时指定的id，默认为当前页面
2. moduleId：模块id(可以为空）
setTitle : 设置页面标题
1. title: 页面标题
2. id : 页面Id,打开页面时指定的id，默认为当前页面
3. moduleId：模块id，默认为当前模块

API 调用

框架页上开放了一个对象，topManager,注意一下几点：

使用API前一定要判断：if(top.topManager)
模块id 可以为空，默认是当前模块
跨域页面内部不能使用这些接口

示例

下面是一些打开页面的示例，都是直接调用对应的API完成的，更加方面的使用方式，在具体的页面中说明。

左侧菜单中配置过的页面

打开菜单配置页面

//进行操作时，必须判断页面是否在框架页内，
//否则报错
if(top.topManager){
  //打开左侧菜单中配置过的页面
  top.topManager.openPage({
    id : 'main-menu',
    search : 'a=123&b=456'
  });
}

打开未配置过的页面

相对地址页面打开百度网址


  //打开相对地址，相对地址，必须以框架页面（main页面）为起始，不是相对于当前页面的位置
  top.topManager.openPage({
    id : 'test1',
    href : 'main/test.html',
    title : '相对地址页面'
  });

  //打开绝对路径，可以是同域的，也可以是外部链接
  top.topManager.openPage({
    id : 'baidu',
    href : 'http://www.baidu.com',
    title : '百度页面'
  });

关闭页面

关闭页面一般用于3种情形：

关闭本页
关闭其他页面（几乎未用到过）
打开指定页面，关闭本页（可以用本页跳转代替，不过要修改标题）

关闭示例

关闭本页关闭顶部导航页面打开其他页面，关闭自身

    //关闭当前页
    top.topManager.closePage();

    //关闭其他页面时，如果页面未打开，不进行任何操作
    top.topManager.closePage('main-menu');

    //打开其他页面并关闭本页，常用于成功、失败页面的跳转
    top.topManager.openPage({
      id : 'main-menu',
      isClose : true
    });

刷新页面

刷新页面一般用于2种情形：

刷新本页
本页修改数据后，如果其他页面需要实时刷新页面，则刷新指定页面

刷新示例

刷新本页刷新顶部导航页面

    //刷新当前页
    top.topManager.reloadPage();

    //刷新其他页面时，如果页面未打开，不进行任何操作
    top.topManager.reloadPage('main-menu');

修改标题

一般修改标题发生在本页跳转时，跳转到的页面跟本页面标题不一致，可以：

在跳转前修改标题：触发跳转时修改标题
跳转后修改标题：在页面加载时修改当前页面的标题

一般我们在项目中使用第二种方式，第一种方式限于，跳转的页面自己不能控制时

示例

//修改本页面标题
top.topManager.setPageTitle("新的标题");

//修改其他页面标题
top.topManager.setPageTitle("新的标题","main-menu");

常见问题

页面操作中常见的问题如下：

跨域问题，这个问题是iframe框架最常见的问题，修改domain只能解决部分问题。
跨模块操作页面，需要指定一级目录(模块）的id，见菜单配置页面
页面编号，点击菜单打开的页面，使用的编号是在菜单配置中的，如果打开一些详情页面，需要根据一定规则动态生成编号。
首页刷新问题，当切换到一个模块，打开一个页面时，会在地址栏添加模块和页面编号，当刷新时，会返回到之前的模块和页面，但是其他打开的页面丢失。
跨页面刷新数据问题，从一个列表页打开编辑页面后，修改完数据提交，此时是否需要刷新列表页，需要做处理。

还有几个未处理的问题：

页面回退，即点击页面的回退按钮，未做处理
tab页面的顺序，未做可调整顺序功能，当关闭一个tab页面时，只是简单的激活前一个页面。
未对窗口改变做事件处理。
and so on