`
takkymj
  • 浏览: 126864 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

框架页面下的子页面刷新与跳转指定URL问题

    博客分类:
  • html
阅读更多
框架页面非常不错,是一个了不起的技术,为我们程序员省去了不少的重复劳动,但是也出现了一个问题,如以下代码:

<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td><iframe src="top.jsp" width="900" height="142" scrolling="No" frameborder="0"></iframe></td>
</tr>
</table>
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td width="212" align="left" valign="top"><table width="198" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="198"><iframe id="loginFrame" src="ulogin.csl" width="198" height="111" scrolling="No" frameborder="0"></iframe></td>
      </tr>
    </table>
<table width="198" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="198"><iframe name="count" src="count.jsp" width="198" height="135" scrolling="No" frameborder="0" marginheight="0" marginwidth="0" vspace="0" hspace="0"></iframe>
   </td>
      </tr>
    </table>
    <table width="198" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="198"><iframe src="companyprofile.jsp" height="200" width="198" scrolling="No" frameborder="0"></iframe></td>
      </tr>
    </table></td>
    <td width="688" valign="top" class="font12"><!--<DIV id="Layer_Loading" style="POSITION: absolute;display:none;">页面正在加载中……</DIV>-->
      <iframe id="mainFrame" src="firstPage.jsp" width="700" scrolling="No" frameborder="0" onload="toppage();"></iframe></td>
</tr>
</table>
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td><iframe src="bottom.jsp" width="900" height="100" scrolling="No" frameborder="0"></iframe></td>
</tr>
</table>

以上是我们公司的一个网站的主页面框架。

做完了之后,我们BOSS随后发现了一个问题,在非主页面进行刷新,都会跳到上面的页面中,也就是跳到主页面中,这一点让我们BOSS感觉很不爽:“我刷新当前页面,怎么你给我跳到别的页面去了。”

我仔细看了一下,这个问题的确让人很不爽,有不少用户都有“刷新”或者F5的习惯,出现这样的场景真是让人难看。

问题实质很明白:框架页面下的子页面跳转并不改变浏览器栏中的URL,当用户刷新的时候自然而然地跳到原来的主页面当中了。

如何解决这个问题呢?

我想应该跳转的时候同时改变浏览器的URL里的参数,再由主页面接受参数决定跳转到哪个页面。

更改过的代码如下:

<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td><iframe src="top.jsp" width="900" height="142" scrolling="No" frameborder="0"></iframe></td>
</tr>
</table>
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td width="212" align="left" valign="top"><table width="198" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="198"><iframe id="loginFrame" src="ulogin.csl" width="198" height="111" scrolling="No" frameborder="0"></iframe></td>
      </tr>
    </table>
<table width="198" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="198"><iframe name="count" src="count.jsp" width="198" height="135" scrolling="No" frameborder="0" marginheight="0" marginwidth="0" vspace="0" hspace="0"></iframe>
   </td>
      </tr>
    </table>
    <table width="198" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="198"><iframe src="companyprofile.jsp" height="200" width="198" scrolling="No" frameborder="0"></iframe></td>
      </tr>
    </table></td>
    <td width="688" valign="top" class="font12"><!--<DIV id="Layer_Loading" style="POSITION: absolute;display:none;">页面正在加载中……</DIV>-->
<%
      String Url="";
      try{
         Url=request.getParameter("Url");
      }
      catch(Exception ex){
         Url="";
      }
      if(Url==null||Url.equals(""))
      {
      %>
      <iframe id="mainFrame" src="firstPage.jsp" width="700" scrolling="No" frameborder="0" onload="toppage();"></iframe></td>
      <%
      }
      else
      {
        %>
     <iframe id="mainFrame" src="<%=Url+".jsp"%>" width="700" scrolling="No" frameborder="0" onload="toppage();"></iframe></td>  
        <%
      }
      %>
</tr>
</table>
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td><iframe src="bottom.jsp" width="900" height="100" scrolling="No" frameborder="0"></iframe></td>
</tr>
</table>


红色代码是新增加的部分,这样就做到主框架的子页面跳转到别的页面后再刷新就不会出现问题了。剩下来唯一要做的就是改变网站中原来的连接URL,即在原来的连接地址后增加Url参数,

格式为:原来的连接地址+“?URl=”+页面的路径。


事情到了这里,原本以为大功告成,但是发现在IE浏览器中浏览发现了问题,子页面的跳转让整个框架都刷了一遍,这可不是我们所想要的啊,造成服务器和网络的负担。

但是FIREFOX中就不存在这个问题,是部分刷新的(看来FIREFOX的确速度快啊)
分享到:
评论

相关推荐

    javascript页面跳转与自动刷新常用代码

    ### JavaScript页面跳转与自动刷新相关知识点 #### 一、JavaScript刷新页面的多种方法 JavaScript提供了多种方式来刷新页面,具体方法如下: 1. **`history.go(0)`** - 这个方法用于重新加载当前文档。 - **...

    网络课件框架页面同步刷新与自动翻页实现原理.pdf

    网络课件框架页面同步刷新与自动翻页实现原理 本文介绍了网络课件框架页面同步刷新与自动翻页实现原理,讨论了使用ASP语言连接、访问Access数据库的方法,叙述了利用Windows消息和自定义函数功能,结合ASP、Access...

    JS控制div跳转到指定的位置的几种解决方案总结

    在Web开发中,页面内的导航跳转到特定的内容位置是一项常见需求。本文介绍了几种使用JavaScript实现页面滚动到指定div位置的解决方案。这些方法主要包括锚点法、jQuery的animate方法、window.scrollTo方法和...

    Hbuilder MUI 页面刷新及页面传值问题

    父页面A跳转到子页面B,B页面修改数据后再跳回A页面,刷新A页面数据 **步骤1:父页面A代码** ```javascript window.addEventListener("pageflowrefresh", function (e) { location.reload(); }); ``` **解释:*...

    各种js页面跳转代码

    例如:&lt;script language="javascript"&gt;top.location.href=url这段代码将顶级框架刷新到指定的URL。 框架刷新 在HTML中,我们可以使用javaScript:window.parent.frames.manframe.location.reload()来实现框架刷新的...

    C#中的页面跳转

    在C#编程中,页面跳转是Web应用开发中一个非常关键的概念,特别是在ASP.NET框架下。页面跳转允许用户在不同的网页之间导航,提供了一种动态交互的用户体验。本篇将深入探讨C#中如何实现页面跳转,以及如何在实现省市...

    .net页面刷新方法

    在ASP.NET开发中,页面刷新是常见的需求,它允许用户或者程序更新当前页面内容,或者跳转至相同或不同的页面。本文将详细讲解几种在ASP.NET中实现页面刷新的方法。 1. **Response.Redirect()**: 这是最常用的方法...

    页面跳转代码

    // 与原代码类似,此处省略了具体代码,该脚本会在加载完成后跳转到指定URL // ... ``` 5. 隐藏跳转目标的JavaScript方法: 有时候,我们可能希望在跳转时不显示实际的目标URL,以下是一种实现方式:...

    javascript页面跳转常用代码.pdf

    在本文中,我们将介绍 JavaScript 页面跳转常用代码,包括页面刷新、自动刷新、自动跳转、框架刷新、子窗口刷新和页面关闭等。 页面刷新 JavaScript 中有多种方式可以实现页面刷新,包括: 1. `history.go(0)` 2....

    浅谈移动端页面无刷新跳转问题的解决方案.docx

    ### 浅谈移动端页面无刷新跳转问题的解决方案 #### 一、背景及问题提出 在当前移动互联网时代,移动端应用程序越来越受到用户的青睐。然而,传统多页面应用程序在页面跳转过程中存在诸多问题,如页面刷新导致的...

    页面刷新方法汇总(转载)

    在“自动刷新页面的实现方法总结.txt”文件中,可能包含了更多关于如何自动刷新页面的源码示例和实践技巧,如使用定时器(setTimeout或setInterval)实现的JavaScript自动刷新,或者结合框架(如React、Vue等)实现...

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

    4. **使用`History API`**:通过浏览器的`History API`(如`pushState`和`replaceState`),可以在不实际加载新页面的情况下改变URL,这可以用来模拟刷新而不会导致页面跳转。在`iframe`刷新后,利用这些API恢复到...

    javascript页面跳转常用代码宣贯.pdf

    Javascript 页面跳转和刷新的常用代码整理 Javascript 是一种广泛应用于网页开发的脚本语言,它可以实现网页的动态交互和页面跳转。下面我们将对 Javascript 实现页面跳转和刷新的常用代码进行整理。 页面刷新 ...

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

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

    js页面跳转 多种javascript页面中转方法

    - **跨框架跳转**:在使用框架布局的页面中,若需要整个页面(包括所有子框架)都跳转至新页面,可以使用此方法。 - **全站导航**:如网站顶部的全站搜索结果页跳转。 ### 6. `window.open()` #### 实现方式: ```...

    Javascript刷新页面的几种方法

    在Web开发中,有时候我们需要利用JavaScript来实现页面的自动刷新或跳转功能。本文将详细介绍几种常见的使用JavaScript刷新页面的方法,并解释它们的工作原理。 #### 1. 使用`history.go(0)` `history.go(0)`会...

    页面跳转.zip

    URL=新页面URL"&gt;`,在指定秒数后跳转到新页面。 - `&lt;a&gt;`标签:通过`href`属性指定链接,点击后跳转,如`点击跳转&lt;/a&gt;`。 6. AJAX页面跳转: - 在异步请求(如AJAX)中,通常不直接进行页面跳转,而是通过更新DOM...

    js跳转总结

    `则可以刷新名为`anotherFrameID`的子框架。 在ASP.NET中,服务器端代码可以输出刷新父窗口的脚本,如: 1. `this.response.write("&lt;script&gt;opener.location.reload();&lt;/script&gt;");` 2. `this.response.write(...

    js页面跳转整理。。

    这是一种非常直接的页面跳转方式,它可以通过改变`window.location.href`属性来改变当前页面的URL,从而实现页面跳转。例如: ```javascript window.location.href = "target.aspx"; ``` 这种方式非常适合于...

Global site tag (gtag.js) - Google Analytics