基于iframe的单页应用组件

一、iframer是什么

一款基于iframe的单页应用组件（single page application）

二、使用场景

音频、IM类站点，避免因页面跳转而引起的播放停顿、聊天状态丢失等问题。

三、优缺点

优点：非前端MVC结构，不影响SEO。改造方便，相对于其他等单页应用框架，学习成本非常低。

不足：基于页面，颗粒度比较大，动效不够细腻。

四、iframer的工作模式 相信我，这段文字看完你就会懂的

在已有站点的基础上新增一个页面，这里称之为【主页面】。

在所有页面（不包括主页面），判断浏览者为正常用户，并且不处于iframe中，满足则跳转到【主页面】，其余情况不处理。

在【主页面】中iframer.js会根据锚点（hash）显示对应的页面，并且调控个页面的链接跳转。

4.1、点击链接时的处理逻辑

排除的链接：href为javascript::、javascript:void(0)、#xxx。

新窗口打开：不同域名，或包含定义时指定的expect_class。

其余链接皆纳入iframer单页跳转的逻辑。已处理相对路径的计算。（../../article.html、article/23.html ）

4.2、页面有重定向怎么办？

iframer.js会监听页内跳转，实时修改url、页面title，若跳转到当前域名外（如：auth认证），不实时修改页面地址，规避因为浏览器同源策略引起的错误。