单页应用view显示细节

要实现一个类似邮箱的系统,左侧菜单,点击之后右侧tab显示。有点像网易邮箱。

在实现过程中,点击了左侧菜单导航,右侧内容该如何取回来展示呢?

自己实现方式是通过ajax获取html片段,然后使用jquery的html方法写入到页面, 且html片段中的script标签的type属性写成了 text/javascript 的类型,然后再通过jquery方法获取所有的script 得到对应src,然后动态创建script标签加载js,以此建立起当前tab页与该页js实例间的关系 从而实现关闭tab时 执行相应的destroy操作,比如:清空dom引用,解绑事件等等。

老版本实现方式是直接用的iframe实现,点击左侧菜单a标签的target配置为右侧iframe的name对应值实现,但是父子页面间通讯、交互之类的很麻烦。

想知道其他的单页应用在具体编码时,通过路由变更回调中,展示对应的view时 如果管控html的。


慕标5832272
浏览 471回答 1
1回答

繁星coding

如果不用 iframe,现在常用的 VUE、React 这些框架做单页应用都很方便的。如果用 iframe,自己写个简单的通讯框架其实也不难,无非就是判断一下自己是在 top 还是在 iframe 里,然后跟另一方建立联系(通常是 iframe 主动向 top 发送请求)因为对框架我没深入研究,所以对路由不太熟。但大概也就是一个寻找资源的方式,一般按照框架约定来实现路由是不会有啥大问题的。但是如果你相自己写单页框架,那可能就麻烦了,尤其需要注意资源的加载、缓存和销毁,搞得不好浏览器内存占用涨得飞快。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript