回到首页

基于iframe的单页应用组件

/bh-lay/iframer

查看demo 下载

一、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认证),不实时修改页面地址,规避因为浏览器同源策略引起的错误。

I'm in Github