• 注册
  • 前端后端 前端后端 关注:0 内容:26

    JavaScript 中 href/reload/replace (页面跳转/替换/刷新) 的区别

  • 查看作者
  • 打赏作者
    • 前端后端
    • Lv.14
      帅气冲天

      href 方法:该方法指定URL进行跳转

      window.location.href的用法

      javascript 中的 location.href 有很多种用法,主要如下:

      self.location.href="/url";        // 当前页面打开URL页面
      location.href="/url";             // 当前页面打开URL页面
      windows.location.href="/url";     // 当前页面打开URL页面,前面三个用法相同。
      this.location.href="/url";        // 当前页面打开URL页面
      parent.location.href="/url";      // 在父页面打开新页面
      top.location.href="/url";         // 在顶层页面打开新页面

      如果页面中自定义了frame,那么可将parent self top换为自定义frame的名称,效果是在frame窗口打开url地址

      此外,window.location.href=window.location.href;和window.location.Reload()和都是刷新当前页面。区别在于是否有提交数据。当有提交数据时,window.location.Reload()会提示是否提交,window.location.href=window.location.href;则是向指定的url提交数据

      reload 方法:该方法强迫浏览器刷新当前页面。

      语法:location.reload   ([bForceGet])  

      参数: bForceGet, 可选参数

      默认为 false – 从客户端缓存里取当前页; true – 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5“刷新”

      刷新页面函数

      window.focus();                    // 刷新窗口
      document.execCommand("Refresh");   // 刷新窗口
      self.location.reload();            // 刷新当前窗口
      parent.location.reload();          // 刷新父窗口
      aaa.location.reload();             // 弹出窗口刷新父窗口
      window.location.reload();          // 强制刷新页面,从服务器重新请求!

      使用 window.location.replace() or window.location.href() 来重新加载此页面不出现提示框

      replace 方法:该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过“前进”和“后退”来访问已经被替换的URL。

      语法: location.replace(URL) 

      参数: URL

      在实际应用的时候,重新刷新页面的时候,我们通常使用: location.reload() 或者是 history.go(0) 来做。因为这种做法就像是客户端点F5刷新页面,所以页面的method=”post”的时候,会出现“网页过期”的提示。那是因为Session的安全保护机制。可以想到:当调用 location.reload() 方法的时候, aspx页面此时在服务端内存里已经存在, 因此必定是 IsPostback 的。如果有这种应用: 我们需要重新加载该页面,也就是说我们期望页面能够在服务端重新被创建,我们期望是 Not IsPostback 的。这里,location.replace() 就可以完成此任务。被replace的页面每次都在服务端重新生成。你可以这么写: location.replace(location.href)


      <a onclick="javascript:window.location.href=window.location.href;">
      <a onclick="javascript:window.location.reload();">

      测试效果一样,表单没有提交。

      <input type="submit" onclick="javascript:window.location.reload();" value="单击" />
      <input type="submit" onclick="javascript:window.location.href=window.location.href;" value="单击" />

      都提交数据

      window.location.Reload();         // 是刷新.(如果有数据提交的话,会提示是否提交的(是和否选项))
      window.location.href=window.location.href; // 是定向url提交数据

      最好不要用 location.reload(),而用 location=location 比较好,还有在模式窗口(showModalDialog和showModelessDialog)前者不能用。


      页面实现跳转的九种方法实例:

      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>navigate</title>
      <script language="javascript">
          setTimeout('window.navigate("top.html");',2000);
          setTimeout('window.document.location.href="top.html";',2000);
          setTimeout('window.document.location="top.html";',2000);
          setTimeout('window.location.href="top.html";',2000);
          setTimeout('window.location="top.html";',2000);
          setTimeout('document.location.href="top.html";',2000);             
          setTimeout('document.location="top.html";',2000);
          setTimeout('location.href="top.html";',2000);
          setTimeout('location.replace("top.html")',2000);
          //window对象
              //document对象
                  //location对象
                      //href属性
                      //1.window.document.location.href
                      //2.window.document.location
                      //3.window.location.href
                      //4.window.location
                    
                      //5.document.location.href
                      //6.document.location
                      //7.location.href
                      //8.window.navigate
                      //9.location.replace
                      //只要使用location方法,和任意的window对象,location对象,href属性连用,都可以页面的跳转
      </script>
      </head>
      
      <body>
      页面将在2秒后跳转
      </body>
      </html>

      请登录之后再进行评论

      登录

      我关注的论坛

      暂没有数据

    • 发布内容
    • 做任务
    • 实时动态
    • 偏好设置
    • 帖子间隔 侧栏位置: