`
liuwei0376
  • 浏览: 9949 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

使用iframe解决导航菜单刷新问题

 
阅读更多
使用背景:

    项目架构时采用了sitemesh作为页面布局框架(品字形结构,上部banner,下部左方树形菜单,右方内容区域),采用后,页面开发提高了很多,只需要开发右方content内容区域的jsp页面.

    但是凡事顾此即失彼,由于采用sitemesh,当单击左方菜单时,右方内容展示的同时,左边打开的树形节点立即关闭,记录不了树被操作的状态,体验很差.

改进方法
    想到了3种:
    1. ajax异步刷新.目测与sitemesh搭配不太好使用.
    2. 菜单项是个锚节点,点击时,带上标志其所在位置的键值对参数,传到后台,再由后台将该键值对随新页面被sitemesh装配后返回,再通过js将相关菜单展开.
       虽然这样可以解决菜单记忆问题,但是页面刷新,和菜单项重新由闭合项展开的状态很起来很山寨.
    3. 采用iframe.每一个iframe操作互不影响.刚好可以曲线解决上述问题.

开始对原项目进行改进
    步骤1:
    既然选择不用sitemesh,就抛弃的彻底点,去除依赖jar包,去除web.xml相关配置,去除sitemesh配置文件,去除default页面对其的引用和布局代码.
   
    步骤2:
    将sitemesh布局诸如<jsp:include 和 <decorator:body/> 之类代码去掉,转而采用iframe布局,修改布局代码如下:

<div class="main">
<div>
<div class="main_left" style="float: left;">
<iframe allowtransparency="true" src="left_nav.jsp" id="left_frame"
name="left_frame" width="211px" height="600px"
frameborder="0" > </iframe>
</div>

<div style="float: left;">
<iframe allowtransparency="true" id="right_frame" name="right_frame"
width="813px" height="600px" frameborder="0" align="right" >
</iframe>
</div>

</div>
</div>

     步骤3:
     left_nav.jsp中,锚点添加target属性,值为内容区域iframe的id值.

     代码如下:
<li>
<a onclick="javascript:OpenOrCloseThisMenu(6)" href="javascript:void(null)">
<span class="cate_name">图书分类</span>
<em></em>
</a>
</li>
<li id="LM6" class="seclect_li" style="display: none">
<a href="infoTechnology.do?method=upload" target="right_frame">信息技术</a>
</li>

分享到:
评论

相关推荐

    使用iframe实现点击导航无刷新切换页面

    这里的JavaScript函数`changeIframe`接收一个参数,即要加载的页面URL,并将其赋值给`iframe`的`src`属性,从而实现在导航栏点击时无刷新切换内容。 **三、Bootstrap导航栏的响应式设计** Bootstrap的导航栏是响应...

    后台管理禁止iframe刷新返回首页

    然而,`iframe`的使用有时也会带来一些问题,比如在后台管理系统中,当用户在某个子页面(如二级菜单页面)操作时,如果`iframe`刷新,可能会导致页面跳转回首页,这显然不是用户期望的行为。针对这个问题,我们需要...

    iframe实现左侧菜单右侧页面简单示例

    "iframe实现左侧菜单右侧页面简单示例"就是一个典型的双栏布局模式,常用于展示左侧导航菜单,右侧则展示对应的内容区域。这种设计模式在很多网站和管理系统中都很常见。 Iframe,全称"Inline Frame",是HTML中的一...

    jQuery内嵌iframe导航菜单

    在这个“jQuery内嵌iframe导航菜单”的主题中,我们将深入探讨如何利用jQuery来创建一个动态的、内嵌在iframe中的导航菜单。这个菜单可以作为网页中的一个模块,用于展示和切换不同的页面内容,而无需重新加载整个...

    bootstarp+iframe 实现局部刷新 后台模板

    在这个后台模板中,Bootstrap可能被用来定义导航菜单、按钮、表格、卡片等元素的样式和布局,确保在不同屏幕尺寸下的良好展示。 `&lt;iframe&gt;`标签则常用于在网页中嵌入另一个网页或应用,相当于在一个小窗口内显示另...

    jQuery内嵌iframe导航菜单.zip

    《jQuery内嵌iframe导航菜单详解》 在网页设计与开发中,导航菜单是不可或缺的一部分,它为用户提供清晰的页面结构和便捷的浏览路径。而jQuery作为一款强大的JavaScript库,为创建动态、交互式的导航菜单提供了丰富...

    jQuery内嵌iframe导航菜单特效源码.zip

    本资源"jQuery内嵌iframe导航菜单特效源码"提供了一种实现方式,将导航菜单与内嵌的iframe框架结合,使得用户在点击菜单项时,可以在不刷新整个页面的情况下加载不同的内容。 这个源码的核心是利用jQuery选择器、...

    基于AdminLTE(bootstrap)用iframe实现的局部刷新的案例

    它提供了一系列预定义的样式、布局选项和插件,如导航菜单、图表、表格、表单等,使开发者能够轻松创建专业且功能强大的后台界面。 接下来,我们关注核心主题:局部刷新。在网页开发中,局部刷新是指只更新页面的某...

    layui点击导航栏刷新tab页的示例代码

    在现代网页设计和开发中,Layui作为一个流行的前端UI框架,它的使用日益广泛。它基于jQuery,提供了一整套的解决方案,包括模块化、可定制的界面组件,使得网页开发更加快捷、高效。Layui的tab组件是该框架中非常...

    layuiadmin-iframe3.zip

    2. iframe的使用:layui提供了一套完整的iframe解决方案,包括创建iframe、动态加载内容、与父页面或兄弟iframe之间的通信等。在layuiadmin-iframe3中,可以看到如何通过layui的API来添加和控制iframe元素。 3. ...

    ACE_iframe框架版.rar

    2. **组件库**:包括导航菜单、表单元素、按钮、提示框、模态对话框等,这些都是后台系统常见的交互元素,ACE_iframe提供了丰富的预定义样式和API供开发者使用。 3. **主题定制**:通过CSS主题,开发者可以轻松改变...

    后台模板框架iframe

    例如,左侧菜单栏、顶部导航和主要内容区可以分别置于不同的iframe中,当用户点击菜单时,只有主要内容区的iframe会更新内容,其他部分保持不变。 2. 内容隔离:iframe使得不同部分的JavaScript和CSS可以独立作用于...

    TabDemo(支持iframe修改)

    这个项目旨在帮助开发者在网页上创建一个用户友好的导航结构,通过点击不同的tab标签,可以在同一区域内加载不同的内容,而无需刷新整个页面。这一功能在展示大量但相互关联的信息时非常有用,可以提高用户体验。 ...

    layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法

    在本文中,我们将探讨如何使用layui框架来实现一个功能,即当用户点击左侧导航栏时,不刷新整个页面,仅刷新页面的特定区域。layui是一个轻量级的前端UI框架,它提供了丰富的组件和功能,使得开发人员可以方便地构建...

    iframe异步加载实现点击左边菜单加载右边内容实例讲解

    在本实例中,我们将讨论如何利用iframe实现异步加载,特别是在点击左侧菜单时动态改变右侧内容,而无需刷新整个页面。 首先,我们需要创建三个文件:一个主页面(例如Default.html),以及两个用于在iframe中加载的...

    JS 禁用 退格-刷新-禁用地址栏-菜单栏-右键-窗口最大化

    在一些特定的环境中,如使用`&lt;iframe&gt;`或者Electron等桌面应用框架,可以创建全屏模式来隐藏浏览器菜单,但这些方法不适用于标准Web页面。 5. **禁用右键菜单**: 右键点击通常会触发浏览器的上下文菜单。通过监听...

    左侧菜单栏控制右侧页面内容切换

    在这个场景中,我们关注的是一个基于"jQuery + Bootstrap"的示例项目,它实现了左侧菜单栏控制右侧页面内容切换的功能,并且结合了Bootstrap的弹框展示。下面我们将深入探讨这个项目的核心技术和实现细节。 首先,...

    基于bootstrap页面渲染的问题解决方法

    总结来说,解决基于Bootstrap页面渲染问题的一个有效方法是利用Ajax进行局部刷新,而不是使用`iframe`。这种方法不仅保持了页面的整体布局,还提高了页面加载速度和用户体验。在实际开发中,应结合项目需求和技术...

    HtmlDemo.zip

    8. AJAX(异步JavaScript和XML):虽然未明确提及,但在实现菜单的动态加载或更新时,AJAX技术也可能被使用,它可以不刷新整个页面的情况下获取并更新数据,提供流畅的用户体验。 总结来说,"HtmlDemo.zip"中的示例...

Global site tag (gtag.js) - Google Analytics