现在有个需求, 做个管理后台的框架加模版. 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, 都可以正常运行). 想请问这种方式有什么弊端? 暂时没看得出来, 但是我疑虑比较大.
另外, 是不是有什么更好的方案能解决这个问题? 还请有过实践的各位不吝赐教. 最好能附上兼容性问题.
jquery.load()目前测试下来应该是没什么大问题. 因为load的部分可以封装成一个jsp页面来写. 和公司之前一直采用的普通的开发方式没有什么两样. 这样开发人员在过渡方面几乎无缝.
昨天晚上我也仔细反复论证了一下这个问题的两个方案.
方案1, 优点: 因为是普通的页面, 公司现有的一套大数据项目的页面采集模块可以直接使用. 不需要额外编写unload等事件. url不用靠hash来维持. 但是缺点也是显著的, 其一是之前提到的效率问题, 毕竟每次都要请求并解析上百个菜单项(尽管后台缓存技术以及现在PC端浏览器的性能来说, 这个根本不是问题). 其二就是没办法做到在一个页面上打开多个功能. 要想同时打开两个菜单操作一个工作流程(这在后台管理系统中应该很常见), 那只有浏览器同时打开两个标签页来解决. 这个和大部分情况的操作习惯有冲突, 能避免还是尽量避免.
方案2, 先说缺点, 就是不可知的bug. 因为个人比较倾向于尽量避免第3方框架或者不熟悉的技术(在此就是jquery.load()没有一个完整项目的经验). 因为不出问题还好, 出了问题一旦是框架的本身缺陷就很麻烦. 需要和作者沟通并等待下一个版本的修复. 前端的问题自己想办法绕过的话又有一堆兼容性问题等着, 很头疼. 然后为了满足将来可能要加入的用户行为数据分析功能, 需要自己封装实现一套脚本来进行页面数据采集, 对公司现有的模块改动较大. 但是优点也很明显, 因为整个项目结构对普通开发人员来说完全没有变化, 进入平稳开发阶段的话不需要额外的学习成本.
所以我个人的观点是继续看看有没有大神有更优雅的解决方案. 目前来说我能想到的2种方案都很难取舍.
ajax行不行..........
不用iframe的话，那就用ajax呗，动态的绘画出页面
但是，不建议，因为js绘画上去的，刷新或者后退都是无效的
ajax加载的话除非你用hash之类的记录动作列表，要不无法回退
onload/unload只能自己实现，可以用ajaxSetup注册complete事件，对应load事件，unload的话点击链接加载内容时触发下，对应unload事件
不过ajax来控制注意防止js冲突，要控制的比较多。。还不如直接刷新下页面
可以不用iframe的，原理就是你说的ajax.load发式，没什么问题的。我在github上有个这样实现的后台项目，感兴趣的私信我
想局部刷新，目前我知道的方式也就是iframe、jquery的load方式、ajax请求方式。
其实ajax的方式的弊端你已经说得很清楚了，页面开发工作量太大，bug不好找，也不好调试。维护起来也是噩梦。
ajax请求的方式最终自己写html语句，和jquery的load方式其实差不多，load方式不过是改变整个div的html内容而已。
推荐jquery的load方式，所谓风险也就是开发中可能会遇到的小问题，比如：js加载问题等，其实你到baidu一查就会发现都有解决办法。
而这种方式和iframe一样，开发人员完全可以单独开发功能。
有iframe不用，绕一大圈有意思吗， 用AJAX.LOAD你除非无复杂交互，不然JS会搞死你，iframe有那边大的问题吗？
2020年我来回答一下哈，到现在还是用的iframe(这个玩意最好页不要用了，因为cssjs都是要重新加载一遍的特别消耗资源比如我加载了一个字体图标，外面要用，里面要用就要加载两次，速度也不快)，其次ajax对于以后的升级迭代，会带来无法预料的恐怖结果，不建议。
综合下来看，还是普通的每个页面堆起来，后台其实也不复杂，就那么几个玩意，想要很好的体验那就上vue+前端ui框架，漂亮又好看体验又好，不过如果是一个人开发的情况下，且vue和前端ui框架不熟悉的情况下，这个是不推荐的，还是那句话，就html页面堆起来，简单好用