构建 iframe 门户页 iframe 框架曾经是早期网站内容布局的一种方式,后来因为 Ajax 能自由地进行局部刷新,iframe 的必要性下降,加上开发维护的成本较高,逐渐被减少使用,仅在部分场景使用。但本文正是充分利用 iframe 的特点:能隔离外框导航菜单和页面内容。
为了实现 iframe 门户页,我们需要新增门户服务器 portal.my.com。
开发一个 iframe 门户页 portal.my.com/home.htm,以后所有的页面请求,都通过它嵌套访问。
改造 a、b 网站页面的脚手架,让页面拥有两种模式:独立使用模式和嵌套使用模式,在嵌套使用模式下隐藏原有的菜单信息。
用户访问 a 网站感知到的流程如下:
- 用户访问页面 //portal.my.com/home.htm?page=//a.my.com/page.htm
- iframe 门户页根据参数呈现外框导航菜单
- iframe 门户页中的 iframe,间接访问 //a.my.com/page.htm?mode=nested ,呈现页面内容。在这个例子中,模式 (mode)参数值 nested 表示页面以嵌套的方式被访问,指示不要渲染页面原有的菜单(如有)
同理,用户首次访问 b 网站,也会获得一致的体验。
为了获得更好的体验,应该更改原有页面的主题,让他们的主题颜色等样式趋于一致,如图 2 所示:
图 2. 更改原有页面的主题 |