elig_luan
elig_luan
2016-06-28 09:56
采纳率: 50%
浏览 5.0k
已采纳

关于不用iframe实现页面局部刷新的问题

现在有个需求, 做个管理后台的框架加模版. PM脑洞大开, 说不能用iframe.
请问各位, 有没有什么好点的方法能解决局部刷新的问题?
后台就是普通的, 上面有个状态, 左边是菜单. 本来准备中间大块区域用一个iframe, 然后点击菜单, 刷新iframe区域的url.
如果按照要求, 不用iframe, 我考虑过两种方案, 各有利弊.
首先, 就是用sitemesh这样的, 每次其实都是全部刷新页面的. 只不过顶部和左边不需要每个页面都维护了. 这样即使用了缓存, 但是还是有点太low的感觉. 但是实际上以现在PC的性能来说, 浏览器每次都重新渲染一次menu菜单也不是什么问题.
第二种就是用jquery的load方式. 但是这样会带来开发的难度和一些暂时无法预料的问题. 例如, 现在测试的结果, 可以把jsp文件作为参数来load. jsp里的内嵌js段以及引入的js都能正常运行. 但是嵌入的jsp, 如果需要监听页面的onload以及unload事件, 都无法起作用. jquery的$(document).ready()方法倒是能正确执行(尝试过两种内嵌页面, 一种包含html, title, head, body标签, 另一种直接就是单纯的div, 都可以正常运行). 想请问这种方式有什么弊端? 暂时没看得出来, 但是我疑虑比较大.

另外, 是不是有什么更好的方案能解决这个问题? 还请有过实践的各位不吝赐教. 最好能附上兼容性问题.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

8条回答 默认 最新

  • elig_luan
    elig_luan 2016-06-29 02:08
    已采纳

    jquery.load()目前测试下来应该是没什么大问题. 因为load的部分可以封装成一个jsp页面来写. 和公司之前一直采用的普通的开发方式没有什么两样. 这样开发人员在过渡方面几乎无缝.
    昨天晚上我也仔细反复论证了一下这个问题的两个方案.
    方案1, 优点: 因为是普通的页面, 公司现有的一套大数据项目的页面采集模块可以直接使用. 不需要额外编写unload等事件. url不用靠hash来维持. 但是缺点也是显著的, 其一是之前提到的效率问题, 毕竟每次都要请求并解析上百个菜单项(尽管后台缓存技术以及现在PC端浏览器的性能来说, 这个根本不是问题). 其二就是没办法做到在一个页面上打开多个功能. 要想同时打开两个菜单操作一个工作流程(这在后台管理系统中应该很常见), 那只有浏览器同时打开两个标签页来解决. 这个和大部分情况的操作习惯有冲突, 能避免还是尽量避免.

    方案2, 先说缺点, 就是不可知的bug. 因为个人比较倾向于尽量避免第3方框架或者不熟悉的技术(在此就是jquery.load()没有一个完整项目的经验). 因为不出问题还好, 出了问题一旦是框架的本身缺陷就很麻烦. 需要和作者沟通并等待下一个版本的修复. 前端的问题自己想办法绕过的话又有一堆兼容性问题等着, 很头疼. 然后为了满足将来可能要加入的用户行为数据分析功能, 需要自己封装实现一套脚本来进行页面数据采集, 对公司现有的模块改动较大. 但是优点也很明显, 因为整个项目结构对普通开发人员来说完全没有变化, 进入平稳开发阶段的话不需要额外的学习成本.

    所以我个人的观点是继续看看有没有大神有更优雅的解决方案. 目前来说我能想到的2种方案都很难取舍.

    点赞 评论
  • qq_35235940
    听楼一夜雨 2016-06-28 10:01

    ajax行不行..........

    点赞 评论
  • zy_281870667
    Bug开发攻城狮 2016-06-28 10:37

    不用iframe的话,那就用ajax呗,动态的绘画出页面
    但是,不建议,因为js绘画上去的,刷新或者后退都是无效的

    点赞 评论
  • showbo

    ajax加载的话除非你用hash之类的记录动作列表,要不无法回退

    onload/unload只能自己实现,可以用ajaxSetup注册complete事件,对应load事件,unload的话点击链接加载内容时触发下,对应unload事件

    不过ajax来控制注意防止js冲突,要控制的比较多。。还不如直接刷新下页面

    点赞 评论
  • tang9140
    一汪清水 2016-06-28 14:30

    可以不用iframe的,原理就是你说的ajax.load发式,没什么问题的。我在github上有个这样实现的后台项目,感兴趣的私信我

    点赞 评论
  • mengqingyu555
    暮云收尽溢清寒 2016-06-29 01:26

    想局部刷新,目前我知道的方式也就是iframe、jquery的load方式、ajax请求方式。

    其实ajax的方式的弊端你已经说得很清楚了,页面开发工作量太大,bug不好找,也不好调试。维护起来也是噩梦。

    ajax请求的方式最终自己写html语句,和jquery的load方式其实差不多,load方式不过是改变整个div的html内容而已。

    推荐jquery的load方式,所谓风险也就是开发中可能会遇到的小问题,比如:js加载问题等,其实你到baidu一查就会发现都有解决办法。
    而这种方式和iframe一样,开发人员完全可以单独开发功能。

    点赞 评论
  • zuhuisu
    zuhuisu 2016-06-30 13:00

    有iframe不用,绕一大圈有意思吗, 用AJAX.LOAD你除非无复杂交互,不然JS会搞死你,iframe有那边大的问题吗?

    点赞 评论
  • ljh101
    「已注销」 2020-10-26 12:45

    2020年我来回答一下哈,到现在还是用的iframe(这个玩意最好页不要用了,因为cssjs都是要重新加载一遍的特别消耗资源比如我加载了一个字体图标,外面要用,里面要用就要加载两次,速度也不快),其次ajax对于以后的升级迭代,会带来无法预料的恐怖结果,不建议。

    综合下来看,还是普通的每个页面堆起来,后台其实也不复杂,就那么几个玩意,想要很好的体验那就上vue+前端ui框架,漂亮又好看体验又好,不过如果是一个人开发的情况下,且vue和前端ui框架不熟悉的情况下,这个是不推荐的,还是那句话,就html页面堆起来,简单好用

    点赞 评论

相关推荐