简介

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

  1. 打开页面
  2. 关闭页面
  3. 刷新页面
  4. 更改页面(tab)的标题

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

API接口

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

  1. 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
  2. closePage : 关闭一个页面。参数如下:
    1. id : 页面Id,打开页面时指定的id,默认为当前页面
    2. moduleId:模块id(可以为空)
  3. reloadPage : 刷新页面,参数如下:
    1. id : 页面Id,打开页面时指定的id,默认为当前页面
    2. moduleId:模块id(可以为空)
  4. setTitle : 设置页面标题
    1. title: 页面标题
    2. id : 页面Id,打开页面时指定的id,默认为当前页面
    3. moduleId:模块id,默认为当前模块

API 调用

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

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

示例

下面是一些打开页面的示例,都是直接调用对应的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种情形:

  1. 关闭本页
  2. 关闭其他页面(几乎未用到过)
  3. 打开指定页面,关闭本页(可以用本页跳转代替,不过要修改标题)

关闭示例

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

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

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

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

刷新页面

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

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

刷新示例

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

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

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

修改标题

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

  1. 在跳转前修改标题:触发跳转时修改标题
  2. 跳转后修改标题:在页面加载时修改当前页面的标题

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

示例

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

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

常见问题

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

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

还有几个未处理的问题:

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